绘制文字 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"
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"
各种图像数据在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-12 06:01 为什么|学习笔记|好 芒格巴菲特所传授的多元思维学习法