建筑公司网站关键词有哪些,优秀网站ui设计,长清做网站,360网站怎么做canvas实例应用100 专栏提供canvas的基础知识#xff0c;高级动画#xff0c;相关应用扩展等信息。 canvas作为html的一部分#xff0c;是图像图标地图可视化的一个重要的基础#xff0c;学好了canvas#xff0c;在其他的一些应用上将会起到非常重要的帮助。 文章目录 示例… canvas实例应用100 专栏提供canvas的基础知识高级动画相关应用扩展等信息。 canvas作为html的一部分是图像图标地图可视化的一个重要的基础学好了canvas在其他的一些应用上将会起到非常重要的帮助。 文章目录 示例效果图示例源代码共88行canvas基本属性canvas基础方法 我们经常会看到一些科技场景01数字不断交替下移或者扩散闪现等。这里是一个示例通过setInterval的方式来不断的绘制文字形成瀑布流的状态。 示例效果图 示例源代码共88行 /*
* Author: 大剑师兰特xiaozhuanlan还是大剑师兰特CSDN
* 此源代码版权归大剑师兰特所有可供学习或商业项目中借鉴未经授权不得重复地发表到博客、论坛问答git等公共空间或网站中。
* Email: 2909222303qq.com
* weixin: gis-dajianshi
* First published in CSDN
* First published time: 2023-11-25
*/
templatediv classcontainerdiv classtoph3canvas文字瀑布流特效/h3div大剑师兰特, 还是大剑师兰特gis-dajianshi/div/divdiv classdajianshi canvas iddajianshi width1000 height500/canvas/div/div
/template
scriptexport default {data() {return {}},mounted() {this.getdata()},methods: {getdata() {var canvas document.getElementById(dajianshi);var context canvas.getContext(2d);var fontSize 16;var col Math.floor(1000 / fontSize);var cpy [];for (var i 0; i col; i) {cpy[i] 1;}//定义文字var str dajianshidajianshi;draw();setInterval(draw, 30);function draw() {context.beginPath();context.fillStyle rgba(0,0,0,0.05);context.fillRect(0, 0, 1000, 500);context.font 16px bold 微软雅黑 ;context.fillStyle #00cc33;for (var i 0; i col; i) {var index Math.floor(Math.random() * str.length);var x i * fontSize;var y cpy[i] * fontSize;context.fillText(str.charAt(index), x, y);if (y 500 Math.random() 0.98) {cpy[i] 0; // 只要Math.random 0.98 时才纵坐标从0开始写字}cpy[i];}}},}}
/scriptstyle scoped.container {width: 1000px;height: 600px;margin: 50px auto;border: 1px solid green;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: darkgreen;color: #fff;}.dajianshi {margin: 2px auto 0;width: 1000px;height: 500px;}
/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()
