找人做网站需求怎么写,多商家平台,新浪舆情通app下载,永久不收费的软件app前言 canvas画布是html的新特性#xff0c;熟悉画布我们可以完成很多拖拽#xff0c;标注#xff0c;动画的功能 使用canvas实现一个小例子很容易#xff0c;但是真正在项目中使用时#xff0c;我们需要注意的地方有很多 canvas基本原理就是它基于渲染方法#xff0c;根…前言 canvas画布是html的新特性熟悉画布我们可以完成很多拖拽标注动画的功能 使用canvas实现一个小例子很容易但是真正在项目中使用时我们需要注意的地方有很多 canvas基本原理就是它基于渲染方法根据画布相对的xy坐标长宽来渲染画布效果 熟练使用之间我们肯定是需要连接基本使用和相关注意事项才能在遇到问题时快速解决
canvas基本使用-生成画布-.vue页面
1.先在html中写一个canvas标签
2.通过id或者ref找到canvas标签生成画布
// 书写canvas标签
canvas refcanvas/canvas
// 找到画布标签
this.canvas this.$refs.canvas;
// 设置画布宽高
this.canvas.width 500;
this.canvas.height 200;
// 生成画布
this.ctx this.canvas.getContext(2d); canvas基本使用-渲染文字
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titlecanvas-渲染文字/title/headbodycanvasidcanvas_1width1000height500stylebox-shadow: 0px 0px 20px skyblue;/canvas/body
script// 获取画布var canvas document.getElementById(canvas_1)// 生成画布 - 获取实例var ctx canvas.getContext(2d)
// canvas-文字基本使用// ctx.font 字体大小 字体样式// ctx.fillStyle 字体颜色// ctx.fillText (字体画布x坐标,画布y坐标,总体字体宽度)// 细节-ctx.fillText字体宽度-小于实际字体总宽度时会生效大于实际字体总宽度时不生效-就是默认字体总宽度
// 实心文字ctx.font 30px Arialctx.fillText(欢迎来到canvas, 10, 50)
// 空心文字ctx.font 30px Arialctx.strokeText(欢迎来到canvas, 10, 100)
// 有颜色实体字ctx.font 30px Arialctx.fillStyle #1ba035ctx.fillText(欢迎来到canvas, 10, 150)
// 空心文字有颜色 - 没有效果
// 实心文字 - 有颜色 - 总体字体宽度ctx.font 30px Arialctx.fillStyle #1ba035ctx.fillText(欢迎来到canvas, 10, 200, 100)
// 空心文字 - 总体宽度500 - 超过实际字体总宽度 - 会是默认字体总宽度ctx.font 30px Arialctx.strokeText(欢迎来到canvas, 10, 260, 800)/script
/html
canvas基本使用-渲染圆-填充颜色
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title用canvas画一个圆/title/headbodycanvasidcanvas_1width1000height500stylebox-shadow: 0px 0px 20px skyblue;/canvas/body
script// 获取画布var canvas document.getElementById(canvas_1)// 生成画布var ctx canvas.getContext(2d)// 开始绘制ctx.beginPath()// 圆形坐标let x 50let y 50// arc 的意思是“弧”// 2*Math.PI360度// ctx.arc(在画布x坐标在画布y坐标园半径起始位置结束位置)ctx.arc(x, y, 40, 0, 2 * Math.PI)// 填充颜色ctx.fillStyle #007acc//开始填充ctx.fill()// 绘制线条颜色更改ctx.strokeStyle blue// 绘制线条颜色-默认黑色ctx.stroke()/script
/html
canvas基本使用-动画-圆形闪烁效果动画
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title用canvas画一个圆-闪动/title/headbodycanvasidcanvas_1width1000height500stylebox-shadow: 0px 0px 20px skyblue;/canvasbutton/button/body
script// 获取画布var canvas document.getElementById(canvas_1)// 生成画布var ctx canvas.getContext(2d)let maxRadius 50let minRadius 30let radius 30let flg 1let z 1let color redlet x 100let y 100let start function () {radius flg * zif (radius maxRadius) flg -flgif (radius minRadius) flg -flgctx.beginPath()ctx.arc(x, y, radius, 0, 2 * Math.PI)ctx.clearRect(0, 0, canvas.width, canvas.height)// ctx.clearRect(x, y, maxRadius, maxRadius);// 填充颜色ctx.fillStyle color//开始填充ctx.fill()// 绘制线条颜色更改ctx.strokeStyle blue// 绘制线条颜色-默认黑色ctx.stroke()}let time setInterval(function () {start()}, 20)/script
/html
canvas基本使用-图片层级问题
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title用canvas图片层级问题/title/headbodycanvasidcanvas_1width1000height500stylebox-shadow: 0px 0px 20px skyblue;/canvasbutton/button/body
script// 获取画布var canvas document.getElementById(canvas_1)// 生成画布var ctx canvas.getContext(2d)// 背景let background https://tyunfile.71360.com/UpLoadFile/2019/7/1/14/636975889218136385_shiyugongye_2267571.jpg
// 目标let target https://img2.baidu.com/it/u3223764237,2661865711fm253fmtautoapp138fJPEG?w500h500// 渲染方法let rendergraph function (imgs, x, y, w, h) {// 创建一个img标签渲染图片let img new Image()// 赋值图片img.src imgs// 图片赋值在执行渲染img.onload function () {// 渲染目标图片// ctx.drawImage(img标签, x坐标, y坐标, 宽度, 高度)ctx.drawImage(img, x, y, w, h)}}// 渲染背景图rendergraph(background, 0, 0, 1000, 500)// 渲染目标图rendergraph(target, 415, 80, 50, 50)
// 总结因为先渲染背景在渲染篮球所以篮球在背景之上// 总结canvas图片层级是根据渲染顺序决定的/script
/html
canvas基本使用-文字-形状层级问题
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titlecanvas-园-文字层级问题/title/headbodycanvasidcanvas_1width1000height500stylebox-shadow: 0px 0px 20px skyblue;/canvasbutton/button/body
script// 获取画布var canvas document.getElementById(canvas_1)// 生成画布var ctx canvas.getContext(2d)// 绘制字体-这个数字不会显示被园遮挡ctx.fillStyle #fffctx.font 20px 黑体ctx.fillText(2, 100, 50, 20)
// 开始绘制 - 这是一个周期-开始结束-只会渲染一个颜色ctx.beginPath()// 填充颜色ctx.fillStyle #bc8856// ctx.arc(在画布x坐标在画布y坐标园半径起始位置结束位置)ctx.arc(100, 50, 40, 0, 2 * Math.PI)
// 填充颜色ctx.fillStyle #437778// ctx.arc(在画布x坐标在画布y坐标园半径起始位置结束位置)ctx.arc(150, 50, 20, 0, 2 * Math.PI)
//开始填充ctx.fill()
// 开始绘制-第二个周期ctx.beginPath()// 填充颜色ctx.fillStyle #bc8856// ctx.arc(在画布x坐标在画布y坐标园半径起始位置结束位置)ctx.arc(100, 200, 40, 0, 2 * Math.PI)//开始填充ctx.fill()
// 绘制字体-会显示-代码执行顺序ctx.fillStyle #fffctx.font 20px 黑体ctx.fillText(2, 150, 50, 20)
ctx.fillStyle #fffctx.font 20px 黑体ctx.fillText(2, 100, 200, 20)
// 总结圆形默认填充色是黑色// 文字和图形的层级问题取决于代码执行顺序/script
/html
canvas注意事项-白屏现象-渲染问题-解决方案主页文章有 canvas标签渲染是有一个方法的但我们每次修改完执行渲染时就会出现白屏一闪而过的现象 渲染再快也是需要时间的可以借助动画和视频的帧数来解决这个问题帧数越快肉眼是很难看出来 意思是我们需要把渲染方法背景图图标都封装方法写一个定时器来控制帧数一直渲染 优点不会出现白屏现象只需要更改背景数据和图标数据就可以实现画布的无感刷新察觉不出来 缺点因为使用定时器在画布销毁时要处理定时器因为是定时器长时间在这个页面会出现图标闪烁
canvas注意事项-自适应布局-适配不同分辨率 一直以来功能可以实现适配问题一直是很头痛的问题因为我们无法控制用户电脑型号 canvas适配需要注意2点控制画布长宽不要超出页面布局控制页面上数据等比例缩放 canvas大多数文章都是把长宽直接写在标签上data里面或者在methed方法中直接赋值 这样我们在当前页面是好的当换成老屏幕笔记本mac这个画布就会马上变形影响使用
代码实现-比如当前页面画布1000*500
1.先对项目进行整体适配-主页文章有pc端适配不同分辨率设备
缺点行内样式不能生效写在标签上的宽高也不会生效
2.所以我们需要在画布标签外面套一层div设置成1000*500当分辨率发生变化-我们做了整体适配-外层div样式在style中也会跟着适配改变成当前视口长宽-在画布生成之前获取外层div的长宽赋值给画布-这样不管分辨率怎么变外层div都会跟着变画布长宽也会跟着变就达到了自适应的效果
2.1画布标签
div idcanvas-itemcanvasrefcanvas/canvas
/div
2.2style样式 #canvas-item {width: 1000px;height: 500px;// 画布canvas {width: 100%;height: 100%;}}
2.3在生成画布之前获取外层div大小赋值给画布 // 通过id找到canvas标签外层div标签let canvasfa document.getElementById(canvas-item);// 获取外层div长宽-除了这种方式其他都获取不到-费老大劲let x window.getComputedStyle(canvasfa).getPropertyValue(width);let y window.getComputedStyle(canvasfa).getPropertyValue(height);// 截取结果-去除最后2位单位pxlet wx Number(x.slice(0, -2));let wy Number(y.slice(0, -2));// 这是重要判断依据-根据长宽范围判断在什么设备-针对性对画布上数据进行处理console.log(长宽, wx, wy);// 找到画布标签this.canvas this.$refs.canvas;// 设置画布宽高-遮掩画布的长宽就写活了-自适应适配-不会破坏布局this.canvas.width wx;this.canvas.height wy;// 生成画布this.ctx this.canvas.getContext(2d);
2.4根据不同分辨率设备的长宽范围值当判断条件-对画布上的数据进行适配
注意判断条件长宽尽量不要用 使用 比较合理避免某些分辨率照顾不到
canvas注意实现-自己理解 canvas这个技术可以实现很多功能电子签名点位标注拖拽动画画板等等 了解这些基本知识基本使用注意事项在能在构建功能的时候有思路辨别文章真假能力 实际开发肯定会有各种问题但是慢慢解决这些问题也是一种进步。你遇到问题别人也遇到过肯定能解决 AntV 也可以实现canvas的相似功能但每一项技术它都有优缺点多一个总比没有好加油 总结
经过这一趟流程下来相信你也对 vue-canvas基本使用和注意事项-动画闪烁效果-自适应适配不同分辨率问题 有了初步的深刻印象但在实际开发中我 们遇到的情况肯定是不一样的所以我们要理解它的原理万变不离其宗。加油打工人 什么不足的地方请大家指出谢谢 -- 風过无痕
