网站开发 职业环境分析,h5制作的网站,dnf做代练哪个网站好点,淄博专业网站建设公司查看专栏目录 canvas示例教程100专栏#xff0c;提供canvas的基础知识#xff0c;高级动画#xff0c;相关应用扩展等信息。canvas作为html的一部分#xff0c;是图像图标地图可视化的一个重要的基础#xff0c;学好了canvas#xff0c;在其他的一些应用上将会起到非常重…
查看专栏目录 canvas示例教程100专栏提供canvas的基础知识高级动画相关应用扩展等信息。canvas作为html的一部分是图像图标地图可视化的一个重要的基础学好了canvas在其他的一些应用上将会起到非常重要的帮助。 文章目录 语法示例效果图示例源代码共90行canvas基本属性canvas基础方法 如何使用canvas来绘制图片呢这里有三种方法。
语法 drawImage(image, dx, dy) drawImage(image, dx, dy, dWidth, dHeight) drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 参数图示 示例效果图 示例源代码共90行
/*
* Author: 大剑师兰特xiaozhuanlan还是大剑师兰特CSDN
* 此源代码版权归大剑师兰特所有可供学习或商业项目中借鉴未经授权不得重复地发表到博客、论坛问答git等公共空间或网站中。
* Email: 2909222303qq.com
* weixin: gis-dajianshi
* First published in CSDN
* First published time: 2024-01-16
*/
templatediv classdjs_containerdiv classtoph3canvas绘制图片的三种方法图文示例/h3div大剑师兰特, 还是大剑师兰特gis-dajianshi/divh4el-button typeprimary sizemini clickdraw1()绘制图片/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,imageUrl:require(../assets/amierhan.png),// 此图片大小990*496imageUrl2:require(../assets/tx.png), // 此图片大小75*75}},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);},draw1() {this.clearCanvas()const image new Image();image.src this.imageUrl;image.addEventListener(load, () {console.log(image)//按照设定的尺寸将原图缩放在其中 this.ctx.drawImage(image, 0, 0, 495, 297);//从原图上截取一部分,然后绘制到指定的区块中this.ctx.drawImage(image, 350,350,247,148, 600, 300, 247, 148); }); const image2 new Image(); image2.src this.imageUrl2;image2.onload() {this.ctx.drawImage(image2,700, 200); } },}}
/scriptstyle scoped.djs_container {width: 1000px;height: 680px;margin: 50px auto;border: 1px solid #992299;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: #992299;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()
