javascript使用canvas绘图（一）

shevy 发布于2019-08-26 14:05 / 3577人阅读

摘要：画一条直线后面的会统一使用该样式，不再重复贴出代码这里设置画布大小需要在标签里面直接设置后面的会统一使用该样式，不再重复贴出代码得到得到上下文环境清除原来的痕迹线条颜色起点终点线条宽度这是最后一步，绘制画一个矩形设置填充颜色设置定

画一条直线 css

.canvas{
            background-color: #8BF0F7;
            cursor: pointer;
        }

后面的css会统一使用该样式，不再重复贴出css代码

html

后面的js会统一使用该样式，不再重复贴出css代码

    let canvas = document.getElementsByClassName("canvas");//得到canvas
    let ca=canvas[0]
    let gd= ca.getContext("2d");//得到canvas上下文环境
    gd.beginPath();//清除原来的痕迹
    gd.strokeStyle="red";//线条颜色
    gd.moveTo(100,100);//起点
    gd.lineTo(200,200);//终点
    gd.lineWidth=50;//线条宽度
    gd.stroke();//这是最后一步，绘制

画一个矩形

    let canvas=document.getElementsByClassName("canvas")[0];
    let gd = canvas.getContext("2d")
    gd.beginPath();
    gd.fillStyle="#B1B7B8";//设置填充颜色
    gd.fillRect(50,20,100,50);//设置定位大小（左上宽高）
    gd.stroke();

在一个矩形中清空一个矩形，使其透明

            let canvas=document.getElementsByClassName("canvas")[0];
            let gd = canvas.getContext("2d")
            gd.beginPath();
            gd.fillStyle="#149794"
            gd.fillRect(20,20,150,150);
            gd.clearRect(40,40,50,50);
            gd.stroke();

这里理解为，在canvas画布中，画了一个150150的矩形A，在这个矩形中又绘制了一个5050的clear矩形B，这个B会
清除A中的那一块区域，使B这一区域变得透明，从而显示了画布的浅蓝色,并不是全部层透明

画一条曲线

使用arc方法，比较简单易懂，

            let canvas=document.getElementsByClassName("canvas")[0];
            let gd = canvas.getContext("2d");
            gd.beginPath();
            gd.strokeStyle="#3C5AF2"
            gd.arc(100,100,50,0,90/180*Math.PI);
            //参数：圆心x坐标，圆心y，半径，开始角度，结束角度（2*Math.PI是整圆）
            gd.stroke();

以下使用arc方法绘制饼图

使用arcTo

            let canvas=document.getElementsByClassName("canvas")[0];
            let gd = canvas.getContext("2d")
            gd.beginPath();
            gd.strokeStyle="red"
            gd.moveTo(20,20)
            gd.arcTo(200,40,200,170,100)
            gd.lineTo(200,170)
            gd.stroke();

GPU云服务器云服务器 javascript绘图使用canvas画图用JavaScript绘图使用matplotlib绘图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110005.html

javascript使用canvas绘图（二）

摘要：不同的线条样式这里获取节点我采用的自带的，即在加入属性，不熟悉的朋友可以使用上一篇文章的不同的两条线交合处的拐弯样式圆角平角尖角构图阴影阴影颜色轴上偏移量，负数为相反方向轴上偏移量，模糊的像素值，则不模糊渐变相当于一条渐变线起始颜色不同的lineCap（线条样式） let gd=this.$refs.canvas.getContext(2d) ...

刘厚水 2019-08-26 14:05 评论0 收藏0
HTML5 Canvas游戏开发实战 PDF扫描版

摘要：游戏开发实战主要讲解使用来开发和设计各类常见游戏的思路和技巧，在介绍相关特性的同时，还通过游戏开发实例深入剖析了其内在原理，让读者不仅知其然，而且知其所以然。HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧，在介绍HTML5 Canvas相关特性的同时，还通过游戏开发实例深入剖析了其内在原理，让读者不仅知其然，而且知其所以然。在本书...

cocopeak 2019-04-23 14:39 评论0 收藏0
自开发的EasyCanvas绘图库实践、Pixeler项目开发小结

摘要：所以在此次开发中，尝试了小步快跑快速迭代的方法。开发，不仅是在开发运用上的提升，还是一个开源项目的完整实践。由于时间原因，在开发完基础版本后就去做别的项目。所以，好的文档是项目的开门钥匙。两个项目相辅相成。 showImg(https://segmentfault.com/img/bVba47g?w=900&h=150); 欢迎交换友链： laker.me--进击的程序媛Github：...

lovXin 2019-08-22 17:28 评论0 收藏0