公司网站建设解决方案,大庆城乡建设局网站首页,目前还能去北京吗,建站之星怎么使用查看专栏目录 canvas实例应用100专栏#xff0c;提供canvas的基础知识#xff0c;高级动画#xff0c;相关应用扩展等信息。canvas作为html的一部分#xff0c;是图像图标地图可视化的一个重要的基础#xff0c;学好了canvas#xff0c;在其他的一些应用上将会起到非常重…
查看专栏目录 canvas实例应用100专栏提供canvas的基础知识高级动画相关应用扩展等信息。canvas作为html的一部分是图像图标地图可视化的一个重要的基础学好了canvas在其他的一些应用上将会起到非常重要的帮助。 文章目录 示例效果图示例源代码共88行canvas基本属性canvas基础方法 如何使用canvas绘制绘制美国国旗呢思路很简单绘制矩形绘制五角星上下做一个布局就可以了。美国国旗的形状是长方形国旗的长宽之比为19:10由红、白、蓝三色组成画面格局由两部分组成旗的左上方蓝底上排列着50颗白色的星6颗一排与5颗一排相间排列共排9行旗的其余部分是13道红白相间的条子有7道红色横条以及6道白色横条。
示例效果图 示例源代码共88行
/*
* Author: 大剑师兰特xiaozhuanlan还是大剑师兰特CSDN
* 此源代码版权归大剑师兰特所有可供学习或商业项目中借鉴未经授权不得重复地发表到博客、论坛问答git等公共空间或网站中。
* Email: 2909222303qq.com
* weixin: gis-dajianshi
* First published in CSDN
* First published time: 2024-01-24
*/
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() {// 美国国旗 长宽 494*260 ;蓝色 198*140 从200*100处开始绘制// 绘制7个红条 for (let i 0; i 7; i) {let y 100 40 * i;this.drawRect(this.ctx, 200, y, 494, 20, #B31942);}// 绘制6个白条for (let i 0; i 6; i) {let y 120 40 * i;this.drawRect(this.ctx, 200, y, 494, 20, white);}// 绘制蓝底this.drawRect(this.ctx, 200, 100, 198, 140, #0B3162);// 绘制50个星星 - 6个一行for (let j 0; j 5; j) {let y 120 j * 26;for (let i 0; i 6; i) {let x 220 32 * i;this.drawStar(this.ctx, x, y, 8, 3, 0, white, transparent);}}// 绘制50个星星 - 5个一行for (let j 0; j 4; j) {let y 136 j * 24;for (let i 0; i 5; i) {let x 236 32 * i;this.drawStar(this.ctx, x, y, 8, 3, 0, white, transparent);}}},drawRect(ctx, x, y, w, h, fillColor) {ctx.beginPath();ctx.fillStyle fillColor;ctx.fillRect(x, y, w, h);},drawStar(ctx, x, y, R, r, angle, fillColor, strokeColor) { //中心点x,中心点y,大半径R,小半径r,旋转角度anglectx.beginPath();for (var i 0; i 5; i) {ctx.lineTo(Math.cos((18 i * 72 - angle) / 180 * Math.PI) * R x, -Math.sin((18 i * 72 - angle) /180 * Math.PI) * R y);ctx.lineTo(Math.cos((54 i * 72 - angle) / 180 * Math.PI) * r x, -Math.sin((54 i * 72 - angle) /180 * Math.PI) * r y);}ctx.closePath();ctx.fillStyle fillColor;ctx.strokeStyle strokeColor;ctx.lineWidth 3;ctx.lineJoin round;ctx.fill();ctx.stroke();}}}
/script
style scoped.djs_container {width: 1000px;height: 680px;margin: 50px auto;border: 1px solid #991188;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: #991188;color: #fff;}.dajianshi {margin: 5px auto 0;border: 1px solid #ccc;width: 980px;height: 490px;background-color: #eee;}
/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()
