Canvas方法

什么是canvas

HTML5 canvas 标签用于图形的绘制，通过javascript脚本来完成对canvas图形的绘制。
canvas 标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用Canvas绘制路径,盒、圆、字符以及添加图像。

兼容性

兼容chrome、firefox等主流高版本浏览器，兼容IE9.0以上。

创建一个canvas画布

使用<canvas></canvas> 标签来创建一个画布
注意：默认情况下canvas元素没有边框和内容。

<canvas id="c1" width="800" height="600"></canvas>

使用js来绘制图像

• 获取canvas元素

var oC = document.getElementById('c1');

• 创建context对象

var ctx = oC.getContext('2d');

*getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

• 绘制直线

ctx.moveTo(x,y);  //定义线条开始坐标

ctx.lineWidth = 10; // 线宽

ctx.lineTo(x,y);  //定义线条结束坐标

ctx.strokeStyle = color; // 线条颜色

ctx.closePath(); // 闭合线条

ctx.stroke();  //绘制直线

• 绘制圆形

ctx.arc(x,y,r,start,stop);

x - 圆心x坐标位置
y - 圆心y坐标位置
r - 半径
start - 开始弧度位置
stop - 结束弧度位置

** start/stop均为弧度，start起始位置为右侧90度位置。

使用arc()方法绘制一个圆

ctx.arc(200,200,50,0,360/180*Math.PI);
ctx.stroke();

• canvas文本
  canvas绘制文本有如下截属性和方法：
  font - 字体
  fillText(text,x,y) - 在canvas上绘制实心文字
  strokeText(text,x,y) - 在canvas上绘制空心文字
  Text(‘canvas’,200,200);

ctx.textAlign = ‘center’; // 水平居中
ctx.textBaseline = ‘middle’; // 基线居中(垂直)

绘制实心文本
ctx.font = '50px Arial';
ctx.fillText('canvas',200,200);

绘制空心文本
ctx.font = '50px Arial';
ctx.stroke!

实例

canvas简易画板

源代码：

var oC = document.getElementById('c1');
    var ctx = oC.getContext('2d');

    ctx.beginPath();
    oC.onmousedown = function(ev){
        ctx.moveTo(ev.pageX-oC.offsetLeft,ev.pageY-oC.offsetTop);

        document.onmousemove = function(ev){
            ctx.clearRect(0,0,oC.width,oC.height);
            ctx.lineTo(ev.pageX-oC.offsetLeft,ev.pageY-oC.offsetTop);
            ctx.lineWidth = 10;
            ctx.strokeStyle = 'rgb(244, 122, 10)';
            ctx.stroke();
        }
        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;
        }
    }