全部版块 我的主页
论坛 提问 悬赏 求职 新闻 读书 功能一区 学道会
283 3
2019-06-13
绘制文字
ctx.font = "italic small-caps bold 12px arial";

ctx.fillText("hello1 CAnvas", 10, 50);

控制文本的颜色
一种方法:fillStyle函数设置文本的填充颜色
另一种:createLinearGradient函数为文本填充渐变色。
ctx.font="50px Georgia";
ctx.fillStyle="blue";
ctx.fillText("Hello Canvas!", 10, 50);

ctx.font="50px Verdana";
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);    // c = document.getElementById("myCanvas");
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
ctx.fillStyle=gradient;
ctx.fillText("Hello Canvas!", 10,90);

设置文本边沿
需要使用strokeText函数替代fillText函数,同事要用strokeStyle属性替代fillSytle属性
上面的代码最后两行换成:
ctx.strokeStyle = gradient;
ctx.strokeText("Hello Canvas!", 10,90);
也可以两者都加上,就具有又改变颜色,又设置边沿的效果

设置文本对齐方式
ctx.textAlign = "start/end/lieft/center/right"

        图像数据与URL
各种图像数据在Canvas中都有不一样的展现和存储方式。传统的图像存储使用img标签,将服务器的图片引用到页面,而在canvas中,图片被转换成Base64编码的字符串形式,并存储在URL中

将彩色转为灰度
通过getImageData函数和putImageData函数反转图像颜色。

图像数据URL
如果要将图像数据以URL形式保存,首先需要将这些图像文件转换成Base64编码格式的字符串。一个在线转换工具:http://dataurl.net/#dataurlmaker
然后选择要转换的图片,得到字符串数据

var w = window.open(canvas.toDataURL("image/jpeg"), "smallwin", "width=400, height=350");

二维码

扫码加我 拉你入群

请注明:姓名-公司-职位

以便审核进群资格,未注明则拒绝

全部回复
2019-6-13 21:13:21
二维码

扫码加我 拉你入群

请注明:姓名-公司-职位

以便审核进群资格,未注明则拒绝

2019-6-13 21:31:06
学习笔记 赞
二维码

扫码加我 拉你入群

请注明:姓名-公司-职位

以便审核进群资格,未注明则拒绝

2019-6-13 21:32:02
为学习笔记点赞!
二维码

扫码加我 拉你入群

请注明:姓名-公司-职位

以便审核进群资格,未注明则拒绝

相关推荐
栏目导航
热门文章
推荐文章

说点什么

分享

扫码加好友,拉您进群
各岗位、行业、专业交流群