网店推广的方式,搜seo,旅行社门店做网站嘛,能不能自己做网站推广canvas实例应用100 专栏提供canvas的基础知识#xff0c;高级动画#xff0c;相关应用扩展等信息。 canvas作为html的一部分#xff0c;是图像图标地图可视化的一个重要的基础#xff0c;学好了canvas#xff0c;在其他的一些应用上将会起到非常重要的帮助。 文章目录 使用… canvas实例应用100 专栏提供canvas的基础知识高级动画相关应用扩展等信息。 canvas作为html的一部分是图像图标地图可视化的一个重要的基础学好了canvas在其他的一些应用上将会起到非常重要的帮助。 文章目录 使用路径绘制图形需要一些额外的步骤用到的方法示例效果图示例源代码共97行canvas基本属性canvas基础方法 如何通过canvas通绘制线段绘制多边形呢 图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径甚至一个子路径都是闭合的。 使用路径绘制图形需要一些额外的步骤
创建路径起始点 调用绘制方法去绘制出路径 把路径封闭 一旦路径生成通过描边或填充路径区域来渲染图形。
用到的方法 beginPath() 新建一条路径路径一旦创建成功图形绘制命令被指向到路径上生成路径 moveTo(x, y) 把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。 lineTo(x, y) 画线到指定的坐标(x, y)。相当于一段的终点。 closePath() 闭合路径之后图形绘制命令又重新指向到上下文中 stroke() 通过线条来绘制图形轮廓 fill() 通过填充路径的内容区域生成实心的图形 示例效果图 示例源代码共97行 /*
* Author: 大剑师兰特xiaozhuanlan还是大剑师兰特CSDN
* 此源代码版权归大剑师兰特所有可供学习或商业项目中借鉴未经授权不得重复地发表到博客、论坛问答git等公共空间或网站中。
* Email: 2909222303qq.com
* weixin: gis-dajianshi
* First published in CSDN
* First published time: 2023-11-27
*/
templatediv classcontainerdiv classtoph3canvas绘制线段绘制多边形/h3div大剑师兰特, 还是大剑师兰特gis-dajianshi/divh4el-button typeprimary sizemini clickdrawLine()绘制直线/el-buttonel-button typeprimary sizemini clickdrawPolygon1()绘制多边形直连/el-buttonel-button typeprimary sizemini clickdrawPolygon2()绘制多边形关闭路径/el-button/h4/divdiv classdajianshi canvas iddajianshi width800 height400/canvas/div/div
/template
scriptexport default {data() {return {ctx: null,}},mounted() {this.setCanvas()},methods: {setCanvas() {var canvas document.getElementById(dajianshi);if (!canvas.getContext) return;this.ctx canvas.getContext(2d);},drawLine() {this.ctx.beginPath();this.ctx.moveTo(50, 50);this.ctx.lineTo(600, 50);this.ctx.lineTo(600, 200);this.ctx.stroke(); //绘制路径。this.ctx.closePath();},drawPolygon1() {this.ctx.beginPath();this.ctx.moveTo(50, 50);this.ctx.lineTo(100, 300);this.ctx.lineTo(50, 300);this.ctx.lineTo(50, 50);this.ctx.fillStyle rgba(250,0,0,0.4);this.ctx.fill(); //绘制路径。},drawPolygon2() {this.ctx.beginPath();this.ctx.moveTo(100, 100);this.ctx.lineTo(700, 50);this.ctx.lineTo(700, 200);this.ctx.closePath();this.ctx.strokeStyle rgba(250,0,0,0.8);this.ctx.stroke(); },}}
/scriptstyle scoped.container {width: 1000px;height: 600px;margin: 50px auto;border: 1px solid green;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: indianred;color: #fff;}.dajianshi {margin: 10px auto 0;border: 1px solid #ccc;width: 800px;height: 400px;background-color: #f9f9f9;}
/style
canvas基本属性
属性属性属性canvasfillStylefilterfontglobalAlphaglobalCompositeOperationheightlineCaplineDashOffsetlineJoinlineWidthmiterLimitshadowBlurshadowColorshadowOffsetXshadowOffsetYstrokeStyletextAligntextBaselinewidth
canvas基础方法
方法方法方法arc()arcTo()addColorStop()beginPath()bezierCurveTo()clearRect()clip()close()closePath()createImageData()createLinearGradient()createPattern()createRadialGradient()drawFocusIfNeeded()drawImage()ellipse()fill()fillRect()fillText()getImageData()getLineDash()isPointInPath()isPointInStroke()lineTo()measureText()moveTo()putImageData()quadraticCurveTo()rect()restore()rotate()save()scale()setLineDash()setTransform()stroke()strokeRect()strokeText()transform()translate()
