canvas介绍

canvas是一个可以使用脚本(通常为JavaScript)在其中绘制图形的 HTML 元素.它可以用于制作照片集或者制作简单(也可以是不简单)的动画

canvas 最早被Apple引入,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现. 基于Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素. canvas元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中.

canvas标签使用

canvas元素不被一些老的浏览器所支持, 但被支持于Firefox 1.5+, Opera 9+, 新版本的Safari, Chrome, 以及Internet Explorer 9.

如何检测浏览器支不支持canvas呢？我们可以这么写:

<canvas id="mycanvas" width="300" height="300">
	your brower doesn't support canvas!
</canvas>

这个时候，如果不支持canvas的浏览器就会忽视canvas标签，显示标签中的内容

要注意的是，如果不声明canvas宽高，默认canvas是300*150大小的

为什么不在样式表中声明宽高：由于canvas默认宽高是300*150的，假如在样式表中设置{width:300px;height:300px},相当于把画布宽高度缩放到300px，这个时候画布中的内容也会等比例进行缩放

绘制环境

现在我们可以获取到canvas绘图对象： getContent(‘2d’):现在只支持2d的场景，那有没有3d呢，有这么个东西(webgl)，不过兼容性不大好

var ctx = $('mycanvas').getContext('2d');

绘制方块

  • fillRect(L,T,W,H):绘制填充性方块，默认颜色时黑色
  • strokeRect(L,T,W,H):带边框的方块，默认1px黑色边框
ctx.fillRect(50,50,50,50);
ctx.strokeRect(50.5,50.5,50,50);

为什么绘制带边框的方框时设置绘制起点时

设置绘图

  • fillStyle: 填充颜色(绘制canvas室友顺序的)
  • lineWidth： 线宽度
  • strokeStyle： 边框颜色

使用例子：

ctx.fillStyle = 'red';
ctx.strokeStyle = 'blue';
ctx.lineWidth = 2px;
ctx.fillRect(50,50,50,50);
ctx.strokeRect(50.5,50.5,50,50);

边界绘制

  • lineJoin ：边界连接点样式 -miter(默认),round(圆角),bevel(斜角)
  • lineCap: 端点样式 -butt(默认),round(圆角),square(高度多出宽度一半的值)
ctx.fillStyle = 'red';
ctx.strokeStyle = 'blue';
ctx.lineWidth = 2px;
ctx.lineJoin = 'round';
ctx.fillRect(50,50,50,50);
ctx.strokeRect(50.5,50.5,50,50);

绘制路径

  • beginPath: 开始绘制路径
  • closePath：结束绘制路径
  • moveTo： 移动到坐标
  • lineTo： 直线
  • stroke：画线
  • fill： 填充，默认黑色
  • rect： 矩形区域
  • clearRect：删除一个画布的矩形区域
  • save： 保存路径
  • restore： 恢复路径

现在我们来试试画一个三角形：

ctx.beginPath();
ctx.moveTo(100,100);//定点到坐标处
ctx.lineTo(200,200);//画线结束到坐标处
ctx.lineTo(300,200);
ctx.closePath();//图形未闭合时，闭合开始到借书处
ctx.stroke();//绘制直线
ctx.fill();//填充

小例子

鼠标画线，方块自动滑动 canvas画图例子