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

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=10lineJoin="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第一天

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