如何做网站内链,wordpress编辑器,wordpress首页文章轮播,淄博网站优化服务查看专栏目录 canvas示例教程100专栏#xff0c;提供canvas的基础知识#xff0c;高级动画#xff0c;相关应用扩展等信息。canvas作为html的一部分#xff0c;是图像图标地图可视化的一个重要的基础#xff0c;学好了canvas#xff0c;在其他的一些应用上将会起到非常重… 查看专栏目录 canvas示例教程100专栏提供canvas的基础知识高级动画相关应用扩展等信息。canvas作为html的一部分是图像图标地图可视化的一个重要的基础学好了canvas在其他的一些应用上将会起到非常重要的帮助。 文章目录 示例效果图示例源代码共92行canvas基本属性canvas基础方法 如何使用canvas绘制直角梯形呢方法其实很简单先定位到起始点然后不停的连线最后填充颜色和边框。这里面要确定好四个顶点的位置。 下面是大剑师的一个示例供参考 示例效果图 示例源代码共92行 /* * Author: 大剑师兰特xiaozhuanlan还是大剑师兰特CSDN * 此源代码版权归大剑师兰特所有可供学习或商业项目中借鉴未经授权不得重复地发表到博客、论坛问答git等公共空间或网站中。 * Email: 2909222303qq.com * weixin: gis-dajianshi * First published in CSDN * First published time: 2024-01-04 */ templatediv classdjs_containerdiv classtoph3canvas绘制直角梯形向右/h3div大剑师兰特, 还是大剑师兰特gis-dajianshi/divh4el-button typeprimary sizemini clickdraw()绘制/el-button/h4/divdiv classdajianshi canvas iddajianshi refmycanvas width980 height490/canvas/div/div /template scriptexport default {data() {return {ctx: null,canvas: null,}},mounted() {this.setCanvas()},methods: {setCanvas() {this.canvas document.getElementById(dajianshi);if (!this.canvas.getContext) return;this.ctx this.canvas.getContext(2d);},draw() {this.drawTrapezoid(this.ctx, 150, 100, 300, 100, 100, red, green);this.drawTrapezoid(this.ctx, 450, 300, 400, 100, 200, blue, black);},drawTrapezoid(ctx,x,y,bottomWidth,height,topWidth,fillColor,strokeColor){ // 绘制直角梯形ctx.beginPath();ctx.moveTo(x, y);ctx.lineTo(x topWidth, y);ctx.lineTo(x bottomWidth, y height);ctx.lineTo(x, y height);ctx.closePath();// 设置填充颜色ctx.fillStyle fillColor;ctx.fill();// 设置边线ctx.lineWidth 2;ctx.strokeStyle strokeColor;ctx.stroke();}}} /scriptstyle scoped.djs_container {width: 1000px;height: 680px;margin: 50px auto;border: 1px solid #ff4170;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: #ff4170;color: #fff;}.dajianshi {margin: 5px auto 0;border: 1px solid #ccc;width: 980px;height: 490px;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()