H5 canvas

canvas和svg

canvas: javaScript动态生成。“位图”，适用于像素处理和动态渲染。修改需要重绘

svg：xml静态生成。“矢量图”，不需要重绘

canvas基本结构

html

<canvas id="canvas" width="200" height="300" style="border: 1px solid blue"></canvas>

js

window.onload=function () {
    //获取canvas对象
    var cnv=document.getElementById("canvas");
    //获取上下文环境对象
    var cxt=cnv.getContext("2d");
    //绘制
    cxt.moveTo(50,50);
    cxt.lineTo(150,100);
    cxt.stroke();
}

注意1： canvas为inline-block元素，有3个参数：id，width，height。默认300*500
注意2： 在css中定义width，height无效，一定要在html中定义
注意3： canvas对象方法：
（1）getContext("2d")获取上下文环境
（2）toDataURL() 获取canvas对象产生的位图字符串
注意4： IE7 , IE8 兼容用excanvas.js
github下载地址

<!--[if IE]>
    <script src="excanvas.js"></script>
<![end if]-->

接下来，我们就来看实际的绘图操作吧！！！

---

1. 直线图形

一条直线

cxt.moveTo(50,50);//起始点
cxt.lineTo(150,100);//终止点
cxt.stroke();//绘制

三角形或多边形

cxt.moveTo(50,50);
cxt.lineTo(150,100);//继续lineTo(),就以前一个点为基准
cxt.lineTo(70,150);
cxt.lineTo(50,50);
cxt.stroke();

矩形

    //描边颜色。起始点，终止点，宽，高
    cxt.strokeStyle="pink";
    cxt.strokeRect(50,50,70,70);
    //填充颜色
    cxt.fillStyle="orange";
    cxt.fillRect(90,90,70,70);
    //清空
    cxt.clearRect(100,100,30,30);

常用技巧：清空整个矩形

window.onload=function () {
    //设置简写函数
    function $$(id) {
         return document.getElementById(id);
    }
    var cnv=$$("canvas");
    var cxt=cnv.getContext("2d");
    cxt.fillStyle="orange";
    cxt.fillRect(90,90,70,70);
    //清除
    var btn=$$("btn");
    btn.onclick=function () {
        cxt.clearRect(0,0,cnv.width,cnv.height);
    }
}

正多边形

内角：degree=2π/n
i < n
半径：size
原点座标:（dx,dy）

function $$(id){
	return document.getElementById(id);
}
window.onload=function(){
	var cnv=$$("canvas");
    var cxt=cnv.getContext("2d");
    //调用自定义的正多边形画法
     createPolygon(cxt,3,100,100,50);
     cxt.fillStyle="pink";
     cxt.fill();
}
//定义画正多边的函数，四个参数：图的内容，边数n，原点座标x、y,半径size
function createPolygon(cxt,n,dx,dy,size){
    cxt.beginPath();
    //计算内角
    var degree=2*Math.PI/n;
    for(var i=0;i<n;i++){
        //三个点的角度位置
        var x=Math.cos(i*degree);
        var y=Math.sin(i*degree);
        //将三个点根据座标连接起来
        cxt.lineTo(x*size+dx，y*size+dy);
    }   
    cxt.closePath();
}

曲线图形

描边圆

        function $$(id) {
            return document.getElementById(id);
        }
        window.onload=function () {
            var can=$$("can");
            var cxt=can.getContext("2d");
            //描边圆
            //开始路径
            cxt.beginPath();
            //圆心座标x、y，半径，起始度数，结束度数，逆时针
            cxt.arc(75,75,50,0,360*Math.PI/180,true);
            //结束路径
            cxt.closePath();
            //开始描边
            cxt.strokeStyle="pink";
            cxt.stroke();
        }

填充圆

 cxt.fillStyle="pink";
 cxt.fill();

半圆

 cxt.arc(75,75,50,0,180*Math.PI/180,true);

残缺圆

cxt.arc(75,75,50,0,-270*Math.PI/180,true);

弧线
去掉cxt.closePath();

圆角矩形

        function $$(id) {
            return document.getElementById(id);
        }
        window.onload=function () {
            var cnv=$$("canvas");
            var cxt=cnv.getContext("2d");
            createRoundedRect(cxt,200,100,20,20,20);
            cxt.fillStyle="blue";
            cxt.fill();
        }
        /*width,height:宽高
        r：圆角半径
        offsetX,offsetY:左上角顶点座标，第四个圆角的控制点
         */
        function createRoundedRect(cxt,width,height,r,offsetX,offsetY) {
            cxt.beginPath();
            cxt.moveTo(offsetX+r,offsetY);
            //第一个圆角
            cxt.lineTo(offsetX+width-r,offsetY);
            cxt.arcTo(offsetX+width,offsetY,offsetX+width,offsetY+r,r);
            //第二个圆角
            cxt.lineTo(offsetX+width,offsetY+height-r);
            cxt.arcTo(offsetX+width,offsetY+height,offsetX+width-r,offsetY+height,r);
            //第三个圆角
            cxt.lineTo(offsetX+r,offsetY+height);
            cxt.arcTo(offsetX,offsetY+height,offsetX,offsetY+height-r,r);
            //第四个圆角
            cxt.lineTo(offsetX,offsetY+r);
            cxt.arcTo(offsetX,offsetY,offsetX+r,offsetY,r);
            cxt.closePath();
        }

扇形

        function $$(id) {
            return document.getElementById(id);
        }
        window.onload=function () {
            var cnv=$$("canvas");
            var cxt=cnv.getContext("2d");
            createSector(cxt,cnv.width/3,cnv.height/2,90,270,200);
            cxt.fillStyle="blue";
            cxt.fill();
        }
            /**
             * 中心座标（x,y）
             * 半径r
             * 开始角度angle1
             * 结束角度angle2
             */

       function createSector(cxt,x,y,r,angle1,angle2) {
           cxt.beginPath();
           cxt.moveTo(x,y);
           cxt.arc(x,y,r,angle1*Math.PI/180,angle2*Math.PI/180,false);
           cxt.closePath();

       }