佛山找人做网站,猎头建设网站,wordpress仿落网,阿里云服务器做盗版电影网站查看专栏目录 canvas示例教程100专栏#xff0c;提供canvas的基础知识#xff0c;高级动画#xff0c;相关应用扩展等信息。canvas作为html的一部分#xff0c;是图像图标地图可视化的一个重要的基础#xff0c;学好了canvas#xff0c;在其他的一些应用上将会起到非常重…
查看专栏目录 canvas示例教程100专栏提供canvas的基础知识高级动画相关应用扩展等信息。canvas作为html的一部分是图像图标地图可视化的一个重要的基础学好了canvas在其他的一些应用上将会起到非常重要的帮助。 文章目录 示例效果图示例源代码共94行canvas基本属性canvas基础方法 如何使用canvas绘制直椭圆形呢canvas内置了一个椭圆形的方法使用ctx.ellipse即可。
语法 context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise); 参数 各个参数含义和作用如下 x Number 椭圆弧对应的圆心横坐标。 y Number 椭圆弧对应的圆心纵坐标。 radiusX Number 椭圆弧的长轴半径大小。 radiusY Number 椭圆弧的短轴半径大小。 rotation Number 椭圆弧的旋转角度单位是弧度。 startAngle Number 圆弧开始的角度角度从横轴开始算单位是弧度。 endAngle Number 圆弧结束的角度单位是弧度。 anticlockwise可选Boolean 弧度的开始到结束的绘制是按照顺时针来算还是按时逆时针来算。如何设置为true则表示按照逆时针方向从startAngle绘制到endAngle。 下面是大剑师的一个示例供参考
示例效果图 示例源代码共94行
/*
* 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-buttonel-button typedanger sizemini clickclearCanvas()清除/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: {clearCanvas(){this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);},setCanvas() {this.canvas document.getElementById(dajianshi);if (!this.canvas.getContext) return;this.ctx this.canvas.getContext(2d);},draw() {this.ctx.beginPath();this.ctx.ellipse(450, 200, 180, 60, Math.PI , 0, 2 * Math.PI);this.ctx.lineWidth7this.ctx.strokeStylegreenthis.ctx.stroke()this.ctx.beginPath();this.ctx.ellipse(150, 100, 100, 50, Math.PI , 0, 2 * Math.PI);this.ctx.strokeStyleredthis.ctx.lineWidth3this.ctx.stroke()this.ctx.beginPath();this.ctx.ellipse(750, 100, 100, 50, Math.PI , 0, 2 * Math.PI);this.ctx.lineWidth5this.ctx.strokeStyleorangethis.ctx.stroke()},}}
/scriptstyle scoped.djs_container {width: 1000px;height: 680px;margin: 50px auto;border: 1px solid #994170;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: #994170;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()
