有哪些外贸公司网站做的比较好,邢台网站维护,天天想你视频免费观看西瓜,农产品网络营销论文查看专栏目录 canvas实例应用100专栏#xff0c;提供canvas的基础知识#xff0c;高级动画#xff0c;相关应用扩展等信息。canvas作为html的一部分#xff0c;是图像图标地图可视化的一个重要的基础#xff0c;学好了canvas#xff0c;在其他的一些应用上将会起到非常重…
查看专栏目录 canvas实例应用100专栏提供canvas的基础知识高级动画相关应用扩展等信息。canvas作为html的一部分是图像图标地图可视化的一个重要的基础学好了canvas在其他的一些应用上将会起到非常重要的帮助。 文章目录 示例效果图type列表示例源代码共115行canvas基本属性canvas基础方法 canvas如何设置图形各种混合模式呢通过context.globalCompositeOperation type的方法来实现。这里面的type有很多种。请参考列表。
示例效果图 type列表
type说明source-over绘制图形的默认混合方式直接在现有图形的上方绘制纯视觉覆盖source-in仅在和原Canvas图形重叠的位置绘制新图形否则处理为透明。如果重叠位置是半透明颜色则也处理为半透明。此效果类似遮罩新内容为显示层原内容是遮罩层遮罩层无论张什么样子都不显示。source-out和source-in相反重叠的位置是透明的不重叠的或者半透明的重叠区域反而显示新图形。同样原内容无论性质如何最终效果都不会出现。source-atop仅在新内容与原内容重叠的位置进行类似遮罩的绘制如果是没有重叠的位置则原封不动显示。这个和 source-in 区别在于source-in 就算与原内容不重叠原内容也永远不会显示但 source-atop 会保留。destination-overdestination-*系列和source-*系列的区别就是动作的主体是新内容还是原内容。source-*系列是新内容而destination-*系列动作主体是元内容。例如这里的destination-over表示原内容在上方也就是新内容在原内容的下方绘制。destination-in显示原内容和新内容重叠的部分。destination-out隐藏原内容和新内容重叠的部分。destination-atop原内容只显示和新内容重叠的部分同时新内容在下方显示。lighter无论是哪种语言哪种工具的混合模式其实概念都类似的。如果这里的lighter等同于Adobe Photoshop中lighter color的话则这个属性值可以理解为自然光混合效果。红绿蓝混合会成为白色。copy只显示新内容。xor互相重叠的区域是透明的。multiply正片叠底。顶层的像素与底层的对应像素相乘。结果是一幅更黑暗的图画。screen滤色。像素反转相乘然后再反转。最终得到更淡的图形和multiply相反。overlay叠加。multiply和screen组合效果。基础图层上暗的部分更暗亮的部分更亮。darken变暗。保留原内容和新内容中最暗的像素。lighten变亮。保留原内容和新内容中最亮的像素。color-dodge颜色减淡。底部图层色值除以顶部图层的反相色值。color-burn颜色加深。底部图层的色值除以顶部图层色值得到的结果再反相。hard-light强光。类似overlay是multiply和screen组合效果。只不过底层和顶层位置交换下。soft-light柔光。hard-light的柔和版本。纯黑色或白色不会生成为纯黑色或白色。difference差异。顶层色值减去底层色值的绝对值。如果都是白色则最后是黑色因为值为0什么时候是白色呢例如RGB(255,0,0)和RGB(0,255,255)色值相减后绝对值是RGB(255,255,255)。exclusion排除。类似difference不过对比度较低。hue色调。最终的颜色保留底层的亮度和色度同时采用顶层的色调。saturation饱和度。最终的颜色保留底层的亮度和色调同时采用顶层的色度。color色值。最终的颜色保留底层的亮度同时采用顶层的色调和色度。luminosity亮度。最终的颜色保留底层的色调和色度同时采用顶层的亮度。
示例源代码共115行
/*
* Author: 大剑师兰特xiaozhuanlan还是大剑师兰特CSDN
* 此源代码版权归大剑师兰特所有可供学习或商业项目中借鉴未经授权不得重复地发表到博客、论坛问答git等公共空间或网站中。
* Email: 2909222303qq.com
* weixin: gis-dajianshi
* First published in CSDN
* First published time: 2024-02-04
*/
templatediv classdjs_containerdiv classtoph3canvas设置图形各种混合模式/h3div大剑师兰特, 还是大剑师兰特gis-dajianshi/divh4el-button typeprimary sizemini clickdraw(source-over)source-over/el-buttonel-button typeprimary sizemini clickdraw(source-in)source-in/el-buttonel-button typeprimary sizemini clickdraw(source-out)source-out/el-buttonel-button typeprimary sizemini clickdraw(source-atop)source-atop/el-buttonel-button typedanger sizemini clickdraw(destination-over)destination-over/el-buttonel-button typedanger sizemini clickdraw(destination-in)destination-in/el-buttonel-button typedanger sizemini clickdraw(destination-out)destination-out/el-buttonel-button typedanger sizemini clickdraw(destination-atop)destination-atop/el-buttonel-button typesuccess sizemini clickdraw(lighter)lighter/el-buttonel-button typesuccess sizemini clickdraw(copy)copy/el-buttonel-button typesuccess sizemini clickdraw(xor)xor/el-buttonel-button typesuccess sizemini clickdraw(multiply)multiply/el-buttonel-button typesuccess sizemini clickdraw(screen)screen/el-buttonel-button typesuccess sizemini clickdraw(overlay)overlay/el-buttonel-button typesuccess sizemini clickdraw(darken)darken/el-buttonel-button typesuccess sizemini clickdraw(lighten)lighten/el-buttonel-button typewarning sizemini clickdraw(color-dodge)color-dodge/el-buttonel-button typewarning sizemini clickdraw(color-burn)color-burn/el-buttonel-button typewarning sizemini clickdraw(hard-light)hard-light/el-buttonel-button typewarning sizemini clickdraw(soft-light)soft-light/el-buttonel-button typewarning sizemini clickdraw(difference)difference/el-buttonel-button typewarning sizemini clickdraw(exclusion)exclusion/el-buttonel-button typewarning sizemini clickdraw(hue)hue/el-buttonel-button typewarning sizemini clickdraw(saturation)saturation/el-buttonel-button typewarning sizemini clickdraw(color)color/el-buttonel-button typewarning sizemini clickdraw(luminosity)luminosity/el-button/h4/divdiv classdajianshi canvas iddajianshi refmycanvas width980 height410/canvas/div/div
/template
scriptexport default {data() {return {ctx: null,canvas: null,imageUrl: require(../assets/bg.png), }},mounted() {this.setCanvas()},methods: {clearCanvas() { this.ctx.clearRect(-180, -50, this.canvas.width, this.canvas.height);this.ctx.restore();},setCanvas() {this.canvas document.getElementById(dajianshi);if (!this.canvas.getContext) return;this.ctx this.canvas.getContext(2d);},draw(type) {this.clearCanvas();this.ctx.save();this.ctx.translate(300,50);const image new Image();image.src this.imageUrl;image.addEventListener(load, () {this.ctx.drawImage(image, 0, 0, 400, 350); this.ctx.globalCompositeOperation typethis.rect(this.ctx,100,90,200,150,blue)});},rect(ctx,x,y,w,h,fillcolor){ctx.fillStylefillcolor;ctx.fillRect(x,y,w,h) },}}
/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: 410px;}.top.el-button{ margin-bottom: 8px;}
/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()
