canvas绘图功能

时间：2015-04-11 09:01:54 收藏：0 阅读：321

JS绘图基本流程如下：

JS通过id寻找到canvas元素，如下代码：
var c=document.getElementById(‘myCanvas‘)
创建context对象，如下代码：
var cxt=c.getContext(‘2d‘)
2d是唯一的一个函数参数，将来可能支持3D绘图，所有的绘图工作就在context对象上完成了

canvas绘图相关对象

cxt.beginPath() 开始绘制路径
cxt.closePath() 结束绘制路径
cxt.stroke() 真正的绘图
cxt.strokeStyle=’#fff’, 设置边框颜色
cxt.lineWidth=2, 设置边框大小
cxt.fillStyle=’red’，设置内容填充区域颜色
cxt.arc(x,y,radius,startAngle,endAngle,true/false)，绘制圆形路径，参数分别为，圆心坐标（x,y），开始和结束角度，顺时针/逆时针
cxt.strokeRect(x,y,width,height)，绘制矩形路径
cxt.fillRect(x,y,width,height)，绘制矩形图形
cxt.createRadialGradient(xStart，yStart，radiusStart，xEnd,yEnd，radiusEnd)，径向渐变范围设置
cxt.createLinearGradient（xStart，yStart，xEnd，yEnd），线性渐变范围设置

html代码：

<body>
    <p>
        <span onclick="btn1_click();" onmouseover="this.style.cursor=‘pointer‘;">实体圆</span>
        <span onclick="btn2_click();" onmouseover="this.style.cursor=‘pointer‘;">边框圆</span>
        <span onclick="btn3_click();" onmouseover="this.style.cursor=‘pointer‘;">衔接圆</span>
        <span onclick="btn4_click();" onmouseover="this.style.cursor=‘pointer‘;">渐变圆</span>
    </p>
    <canvas id="myCanvas" width="400px" height="400px"></canvas>

</body>

js代码：

<script type="text/javascript">
    function $(id)
    {
        return document.getElementById(id);
    }       
    function btn1_click(){
        var cvs=$(‘myCanvas‘);
        var cxt=cvs.getContext(‘2d‘);
        cxt.clearRect(0,0,400,400);
        cxt.beginPath();
        cxt.arc(100,100,50,0,Math.PI*2,true);
        cxt.closePath();
        cxt.fillStyle=‘#eee‘;
        cxt.fill();
    }
    function btn2_click(){
        var cvs=$(‘myCanvas‘);
        var cxt=cvs.getContext(‘2d‘);
        cxt.clearRect(0,0,400,400);
        cxt.beginPath();
        cxt.arc(100,100,50,0,Math.PI*2,true);
        cxt.closePath();
        cxt.strokeStyle=‘#666‘;
        cxt.lineWidth=2;
        cxt.stroke();
    }
    function btn3_click(){
        var cvs=$(‘myCanvas‘);
        var cxt=cvs.getContext(‘2d‘);
        cxt.clearRect(0,0,400,400);
        cxt.beginPath();
        cxt.arc(100,100,50,0,Math.PI*2,true);
        cxt.closePath();
        cxt.strokeStyle=‘#666‘;
        cxt.lineWidth=2;
        cxt.fillStyle=‘#eee‘;
        cxt.fill();
        cxt.stroke();

        cxt.beginPath();
        cxt.arc(180,100,50,0,Math.PI*2,true);
        cxt.closePath();
        cxt.strokeStyle=‘#666‘;
        cxt.lineWidth=2;
        cxt.stroke();
    }
    function btn4_click(){
        var cvs=$(‘myCanvas‘);
        var cxt=cvs.getContext(‘2d‘);
        cxt.clearRect(0,0,400,400);
        cxt.beginPath();
        cxt.arc(100,100,50,0,Math.PI*2,true);
        cxt.closePath();
        cxt.strokeStyle=‘#666‘;
        cxt.lineWidth=2;
        var gnt=cxt.createRadialGradient(100,100,0,100,100,250);
        gnt.addColorStop(0,‘#f00‘);
        gnt.addColorStop(0.3,‘#0f0‘);
        gnt.addColorStop(1,‘#00f‘);
        cxt.fillStyle=gnt;
        cxt.fill();



    }
</script>

效果图：
技术分享

原文：http://blog.csdn.net/u012193330/article/details/44984863