html5 canvas

绘制方块

    •fillRect(L,T,W,H):默认颜色是黑色

    •strokeRect(L,T,W,H):带边框的方块

    •默认一像素黑色边框，显示出来的不一样原因(往左边和右边各分了0.5像素，又因为计算机显示都是一像素一像素显示，它会帮咱们补充成左右各一像素，所以变成了两像素)

避免这个问题：

•设置绘图

    •fillStyle：填充颜色（绘制canvas是有顺序的）

    •lineWidth:线宽度，是一个数值

    •strokeStyle：边线颜色

    •<canvas id="myCanvas"></canvas>

    •<script type="text/javascript">

    •var canvas=document.getElementById('myCanvas');

    •var ctx=canvas.getContext('2d');

    •ctx.fillStyle='#FF0000';

    •ctx.fillRect(0,0,80,100);

    •</script>

•边界绘制

•lineJoin：边界连接节点样式

    -miter(默认),round(圆角),bevel(斜角)

•lineCap：端点样式

    -butt (默认),round(圆角),square(高度多出为宽一半的值)

绘制路径

    beginPath:开始绘制路径

    closePath:结束绘制路径

    moveTo:移动到绘制的新目标点

    lineTo：新的目标点

•绘制路径—2

    •Stroke:画线，默认黑色

    •Fill：填充，默认黑色

    •Rect：矩形区域

   •clearRect:删除一个画布的矩形区域

    •Save：保存路径

    •Restore：恢复路径

•小例子1：鼠标画线

•小例子2：方块移动（canvas10）