HTML5+CSS3-充实笔记0613

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

绘制文字

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");

扫码加我 拉你入群

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

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

分享0 收藏0 回帖

关键词：HTML5 HTML htm gradient Document

学习笔记 赞

为学习笔记点赞！