javascript使用canvas绘图（二）

刘厚水发布于2019-08-26 14:05 / 3180人阅读

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

不同的lineCap（线条样式）

            let gd=this.$refs.canvas.getContext("2d")
            gd.beginPath();
            gd.lineWidth=10;
            gd.lineCap="butt";
            gd.moveTo(50,50)
            gd.lineTo(150,50)
            gd.stroke();
            gd.closePath();
            gd.beginPath();
            gd.lineCap="round";
            gd.moveTo(50,70)
            gd.lineTo(150,70)
            gd.stroke();
            gd.closePath();
            gd.beginPath();
            gd.lineCap="square";
            gd.moveTo(50,90)
            gd.lineTo(150,90)
            gd.stroke();
            gd.closePath();

这里获取节点我采用的vue自带的refs，即在div加入 ref="canvas"属性，不熟悉的朋友可以使用上一篇文章的getElementByClassName

不同的lineJoin(两条线交合处的拐弯样式)

        paint7(){
            let gd=this.$refs.canvas.getContext("2d")
            this.drawMText(100,"round",gd);//圆角
            this.drawMText(200,"bevel",gd);//平角
            this.drawMText(300,"miter",gd);//尖角

        },
        drawMText(y,str,gd){
            gd.beginPath();
            gd.lineCap="butt";
            gd.lineJoin=str;
            gd.lineWidth=10;
            gd.moveTo(20,y);
            gd.lineTo(70,y-80);
            gd.lineTo(82.5,y-25);
            gd.lineTo(90,y-80)
            gd.lineTo(140,y);
            gd.stroke();
            gd.closePath();
        }

构图阴影

    let gd=this.$refs.canvas.getContext("2d");
    gd.beginPath()
    gd.shadowColor="#4C4C4C";//阴影颜色
    gd.shadowOffsetX=5;//x轴上偏移量，负数为相反方向
    gd.shadowOffsetY=-10;//y轴上偏移量，
    gd.shadowBlur=4;//模糊的像素值，0则不模糊
    gd.fillStyle="blue";
    gd.fillRect(100,100,100,100);
    gd.stroke();
    gd.closePath();

渐变

    let gd=this.$refs.canvas.getContext("2d");
    gd.beginPath();
    let gradient=gd.createLinearGradient(30,30,70,70)//相当于一条渐变线
    gradient.addColorStop(0,"#2C56E2");//起始颜色
    gradient.addColorStop(1,"#E23C2C");//终止颜色
    gd.fillStyle=gradient//添加渐变
    gd.fillRect(10,10,100,100)
    gd.stroke();
    gd.closePath();

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

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

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

自开发的EasyCanvas绘图库实践、Pixeler项目开发小结

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

lovXin 2019-08-22 17:28 评论0 收藏0
自开发的EasyCanvas绘图库实践、Pixeler项目开发小结

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

icattlecoder 2019-08-05 13:57 评论0 收藏0
Html5 Canvas 学习之路（二）

摘要：在位置处以宽为高为，清楚指定区域并使其完全透明。调用函数开始一个路径，调用函数结束一个路径。端点是在选段边缘处以线宽为长以一半线宽为宽的矩形。二：Canvas的绘图（上） 1. 概述 Canvas具有强大的绘图功能，可以通过Javascript控制其上下文对象进行绘图。 2. 基本矩形在Canvas上，绘制基本矩形有三种方式：填充、描边、清楚。三种API如下： fillRect(...

sorra 2019-08-22 16:25 评论0 收藏0
Html5 Canvas 学习之路（二）

摘要：在位置处以宽为高为，清楚指定区域并使其完全透明。调用函数开始一个路径，调用函数结束一个路径。端点是在选段边缘处以线宽为长以一半线宽为宽的矩形。二：Canvas的绘图（上） 1. 概述 Canvas具有强大的绘图功能，可以通过Javascript控制其上下文对象进行绘图。 2. 基本矩形在Canvas上，绘制基本矩形有三种方式：填充、描边、清楚。三种API如下： fillRect(...

jsummer 2019-08-05 13:36 评论0 收藏0
画布、拖放事件、音视频

摘要：立即对当前矩形进行填充清除矩形语法解释清除某个矩形内的绘制的内容，相当于橡皮擦绘制圆形概述方法创建弧曲线用于创建圆或部分圆语法解释圆心坐标，半径大小，绘制开始的角度。一、拖放事件 1.1 设置拖拽给标签设置一个draggable设置为true, 标签就可以拖拽了 1.2 拖拽事件 1.2.1拖拽元素事件 (事件对象为被拖拽元素) ondragstart 拖拽前触发 ondra...

Nosee 2019-08-29 16:12 评论0 收藏0