发泡机 东莞网站建设,麦客crm,成都小程序开发报价,国际物流网站查看专栏目录 canvas实例应用100专栏#xff0c;提供canvas的基础知识#xff0c;高级动画#xff0c;相关应用扩展等信息。canvas作为html的一部分#xff0c;是图像图标地图可视化的一个重要的基础#xff0c;学好了canvas#xff0c;在其他的一些应用上将会起到非常重…
查看专栏目录 canvas实例应用100专栏提供canvas的基础知识高级动画相关应用扩展等信息。canvas作为html的一部分是图像图标地图可视化的一个重要的基础学好了canvas在其他的一些应用上将会起到非常重要的帮助。 文章目录 示例效果图示例源代码共104行canvas基本属性canvas基础方法 canvas如何实现涂鸦画板功能呢 我们监听鼠标事件时获取到的坐标是相对于整个页面的坐标e.clientX 和 e.clientY。为了将这些坐标转换为相对于 元素自身的坐标我们需要从这些值中减去 canvas.offsetLeft 和 canvas.offsetTop确保绘制路径是在 canvas 元素的坐标系统内而不是在整个页面的坐标系统中。
canvas.offsetLeft 是一个JavaScript属性它代表了元素在这个例子中是 canvas 元素相对于其最近的定位祖先元素offset parent的左边距离。如果没有定位的祖先元素那么就是相对于文档的左边距离。
这个属性通常与 canvas.offsetTop 一起使用后者代表元素相对于其最近的定位祖先元素的顶部距离。
示例效果图 示例源代码共104行 /*
* Author: 大剑师兰特xiaozhuanlan还是大剑师兰特CSDN
* 此源代码版权归大剑师兰特所有可供学习或商业项目中借鉴未经授权不得重复地发表到博客、论坛问答git等公共空间或网站中。
* Email: 2909222303qq.com
* weixin: gis-dajianshi
* First published in CSDN
* First published time: 2024-02-07
*/
templatediv classdjs_containerdiv classtoph3canvas实现涂鸦画板功能/h3div大剑师兰特, 还是大剑师兰特gis-dajianshi/divh4el-button typesuccess sizemini clickdraw()绘制/el-buttonel-button typedanger sizemini clickclearCanvas()清除画屏/el-button/h4/divdiv classdajianshi
!-- canvas iddajianshi refmycanvas width980 height490 /canvas --canvas iddajianshi refmycanvas mousedownstartDrawing mousemovedraw mouseupstopDrawing width980 height490/canvas/div/div
/template
scriptexport default {data() {return {canvas: null,ctx: null,drawing: false,color: black,lineWidth: 5,lastX: 0,lastY: 0}},mounted() {this.setCanvas()},methods: {clearCanvas() {this.drawing false;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);},startDrawing(e) {this.drawing true;this.lastX e.clientX - this.canvas.offsetLeft;this.lastY e.clientY - this.canvas.offsetTop;},draw(e) {if (!this.drawing) return;const x e.clientX - this.canvas.offsetLeft;const y e.clientY - this.canvas.offsetTop;this.ctx.beginPath();this.ctx.moveTo(this.lastX, this.lastY);this.ctx.lineTo(x, y);this.ctx.strokeStyle this.color;this.ctx.lineWidth this.lineWidth;this.ctx.stroke();this.ctx.closePath();this.lastX x;this.lastY y;},stopDrawing() {this.drawing false;}}}
/script
style scoped.djs_container {width: 100%;height: 680px;margin:0;padding:0;
/* margin: 50px auto; */
/* border: 1px solid #222; */position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: #222;color: #fff;}.dajianshi {margin: 5px auto 0;border: 1px solid #cde;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()
