免费做翻页页面的网站,建设工程施工合同（示范文本）,手机移动端网站怎么做seo,品牌营销策划过程查看专栏目录 canvas实例应用100专栏#xff0c;提供canvas的基础知识#xff0c;高级动画#xff0c;相关应用扩展等信息。canvas作为html的一部分#xff0c;是图像图标地图可视化的一个重要的基础#xff0c;学好了canvas#xff0c;在其他的一些应用上将会起到非常重…
查看专栏目录 canvas实例应用100专栏提供canvas的基础知识高级动画相关应用扩展等信息。canvas作为html的一部分是图像图标地图可视化的一个重要的基础学好了canvas在其他的一些应用上将会起到非常重要的帮助。 文章目录 示例效果图示例源代码共94行相关APIcanvas基本属性canvas基础方法 canvas如何路径剪裁呢clip()表示路径剪裁。使用时候先绘制剪裁路径执行clip()方法再绘制的内容就在这个剪裁路径中呈现。
语法 context.clip(); context.clip(fillRule); context.clip(path, fillRule); fillRuleString 填充规则。用来确定一个点实在路径内还是路径外。可选值包括
nonzero非零规则。此乃默认规则。evenodd奇偶规则。
关于’nonzero’和’evenodd’规则可参见这篇文章。
pathObject 指Path2D对象。
示例效果图 示例源代码共94行 /*
* Author: 大剑师兰特xiaozhuanlan还是大剑师兰特CSDN
* 此源代码版权归大剑师兰特所有可供学习或商业项目中借鉴未经授权不得重复地发表到博客、论坛问答git等公共空间或网站中。
* Email: 2909222303qq.com
* weixin: gis-dajianshi
* First published in CSDN
* First published time: 2024-02-02
*/
templatediv classdjs_containerdiv classtoph3canvas路径剪裁clip/h3div大剑师兰特, 还是大剑师兰特gis-dajianshi/divh4el-button typesuccess sizemini clickdraw1()未剪裁状态/el-buttonel-button typeprimary sizemini clickdraw2()剪裁后状态/el-buttonel-button typedanger sizemini clickclearCanvas()清除画屏/el-button/h4/divdiv classdajianshi canvas iddajianshi refmycanvas width980 height480/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);this.ctx.fillStyleorange;this.ctx.save();},draw1() {this.clearCanvas(); this.ctx.beginPath();this.ctx.fillRect(100,100,400,300); },draw2() {this.ctx.save();this.clearCanvas(); this.ctx.beginPath();this.ctx.moveTo(20, 20);this.ctx.lineTo(500, 480);this.ctx.lineTo(410, 350);this.ctx.clip();// 填充图片this.ctx.fillRect(100,100,400,300) this.ctx.restore();},}}
/script
style scoped.djs_container {width: 1000px;height: 680px;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: 480px;background-color: #eee;}.top.el-button{ margin-bottom: 8px;}
/style
相关API
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip
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()
