标签：ott   sha   微软雅黑   set   lin   base   blank   ntb   can   

视频来源：麦子学院　　讲师：刘慧涛

w3cshool之HTML5画布：http://www.w3school.com.cn/html5/html_5_canvas.asp
html5 canvas参考手册：http://www.w3school.com.cn/tags/html_ref_canvas.asp

begin

1. 绘制矩形
   

   fillStyle=‘颜色‘
   fillRect(x,y,width,height)
   strokeStyle=‘颜色‘
   lineWidth=10
   lineJoin="meter|round|bevel"
   strokeRect=(x,y,width,height)

    

2. 绘制文字
   

   fillText(text,x,y,[maxwidth])
   strokeText(text,x,y,[maxwidth])
   font=‘bold 45px 宋体‘
   textAlign设置字符串水平对齐方式 - textAlign="start|end|left|right|center"
   textBaselign设置垂直对齐方式 - textBaselign="top|hanging|middle|alphabetic|bottom"

    *1,2详情参考另一篇随笔：http://www.cnblogs.com/yolo-bean/p/7909482.html

   
   
   
3. 设置阴影
   

   shadowBlur:阴影模糊值（值越大越模糊）
   shadowColor:阴影颜色
   shadowOffsetX:X方向的偏移
   shadowOffsetY:Y方向的偏移

    示例代码：

   function init(){
           var can=document.getElementById(‘can1‘);
           var ctx=can.getContext(‘2d‘);
           // 设置阴影
           ctx.shadowBlur=4;
           ctx.shadowColor="#000";
           ctx.shadowOffsetX=5;//不带单位，可以设置负值
           ctx.shadowOffsetY=8;
           //绘制文本
           ctx.fillStyle=‘green‘;
           ctx.font="bold 16px ‘微软雅黑‘";
           ctx.textBaseline=‘top‘;
           ctx.fillText(‘还要多久才能接近你‘,100,100);
           }

    

03_HTML Canvas第一天

标签：ott   sha   微软雅黑   set   lin   base   blank   ntb   can   

原文地址：http://www.cnblogs.com/yolo-bean/p/7986127.html