canvas绘图功能

最新推荐文章于 2024-05-28 17:11:01 发布

青天诀

最新推荐文章于 2024-05-28 17:11:01 发布

阅读量1.3k

点赞数 2

分类专栏： Web前端文章标签：绘图

本文链接：https://blog.csdn.net/u012193330/article/details/44984863

版权

Web前端专栏收录该内容

123 篇文章 1 订阅

订阅专栏

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>

效果图：
这里写图片描述

图形添加阴影效果：

var cvs=$('myCanvas');
var cxt=cvs.getContext('2d');
cxt.shadowOffsetX=6;//x方向阴影距离
cxt.shadowOffsetY=6;//y方向阴影距离
cxt.shadowColor='#ccc';// 阴影颜色
cxt.shadowBlur=10;//阴影模糊度
cxt.fillStyle='#eee';
cxt.fillRect(100,100,100,100);

移动，旋转，缩放图形：

cxt.translate(150,150);//移动画布，（150,150）处变成坐标原点
cxt.scale(1.2,1.2);//缩放图形，同时原来的坐标位置距离也会被缩放
cxt.rotate(-Math.PI/4);//旋转画布

青天诀

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas绘图功能

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

扫一扫