 
    
    立即打开
    
 
    
     
    
        
    
 
                                        绘制文字
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");
                                        
                                     
 
 
![二维码]() 
扫码加我 拉你入群
请注明:姓名-公司-职位
以便审核进群资格,未注明则拒绝
 
 
 
 
   
  全部回复
  
 
 
 
 
 
![二维码]() 
扫码加我 拉你入群
请注明:姓名-公司-职位
以便审核进群资格,未注明则拒绝
 
 
 
 
   
  
![二维码]() 
扫码加我 拉你入群
请注明:姓名-公司-职位
以便审核进群资格,未注明则拒绝
 
 
 
 
   
  
![二维码]() 
扫码加我 拉你入群
请注明:姓名-公司-职位
以便审核进群资格,未注明则拒绝
 
 
 
 
   
  
相关推荐
栏目导航
热门文章
推荐文章
 
 
    
 扫码加好友,拉您进群
扫码加好友,拉您进群