可视化/数字孪生专业社区
资源中心
问答
文章
实用工具
ByteVCharts
开源中台
申请建模
申请帮助
登录
注册
申请协助
此单为
付费
协助
×
为协助帮威客用户快速入门,帮威客平台可损供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源(包括源码、3D模型、贴图、数据等),用户的技术团队可在此基础上快速上手,大幅提高3D可视化项目成功基础。
预算金额
公司名称
联系人
微信号
手机号码
提交申请
申请协助
此单为
付费
协助
×
为协助帮威客用户快速入门,帮威客平台可损供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源(包括源码、3D模型、贴图、数据等),用户的技术团队可在此基础上快速上手,大幅提高3D可视化项目成功基础。
预算金额
公司名称
联系人
微信号
手机号码
提交申请
业务咨询
开发咨询
微信咨询
杜老师
黄老师
熊老师
支付信息
×
购买文章
初始Canvas
订单金额
¥
0
实付金额
¥
0
我已阅读并同意ByteV组件购买协议
取消
提交订单
支付宝支付
微信支付
提交订单
0
点赞
0
评论
收藏
分享
举报
初始Canvas
佚名用户
关注
已关注
0
0
0
1470
发表于 2020-05-21 09:57:55
## 一.Canvas基本用法 canvas对应中文是“画布”,`
`是HTML5的新元素,IE9+支持 canvas元素的默认大小是300px * 150px,最简单的代码将生成一个透明的矩形画布,例如: ```
浏览器不支持canvas
``` 如果浏览器支持的话,那么你将不会看到一个300px * 150px的透明块(因为透明了嘛,审查元素就找到它了)。如果浏览器不支持,那么将会显示替换文字:“浏览器不支持canvas”,例如IE8。 有了画布,我好想画点儿什么。不过对于canvas来说,最容易的是画个空心/实心矩形,而不是画条直线,例如: ```
浏览器不支持canvas
``` 结果就是这个样子: [![绘图结果](http://ayqy.net/cms/wordpress/wp-content/uploads/2015/03/%E4%B8%8B%E8%BD%BD.png)](http://ayqy.net/cms/wordpress/wp-content/uploads/2015/03/%E4%B8%8B%E8%BD%BD.png) ## 二.画方画圆画线 矩形在上面已经画过了,用到了上下文对象的描边和填充方法,除此之外还有一个关于矩形的方法:`clearRect()`参数意义相同,作用是掏空一个矩形块(用透明色填充指定区域) 画圆相对麻烦一点,比如要画一个圆心为(30, 30)半径为20的圆: ``` ctx.beginPath();//创建路径 ctx.arc(30,30,20,0,Math.PI*2,true);//设置弧线路径 ctx.closePath();//闭合路径 ctx.stroke();//描边 ctx.fill();//填充 ``` `arc(x, y, radius, startAngle, endAngle, counterclockwise)`方法是用来画弧线的,表示以(x, y)为圆心,radius为半径,起始角度和结束角度分别为startAngle和endAngle,最后一个参数表示前两个角度值是按顺时针还是逆时针算,false表示顺时针。 画线比画圆要简单些(从(30, 30)画一条50px的横线): ``` ctx.beginPath();//创建路径 ctx.moveTo(30, 30);//把起点移动到(30, 30) ctx.lineTo(80, 30);//设置路径连接两点 ctx.closePath();//闭合路径 ctx.stroke();//绘制 ``` 能画线画弧了,那画三角五角也就不在话下了,除了上面用到的路径方法之外,还有以下方法: * `arcTo(x1, y1, x2, y2, radius)`:从上一点开始绘制一条弧线,到(x2, y2)为止,并且以给定的半径radius穿过(x1, y1) * `bezierCurveTo(c1x, c1y, c2x, c2y, x, y)`:贝塞尔曲线,从上一点开始绘制一条曲线,到(x, y)为止,并且以(c1x, c1y)和(c2x, c2y)为控制点 * `quadraticCurveTo(cx, cy, x, y)`:二次贝塞尔曲线,从上一点开始绘制一条二次曲线,到(x, y)为止,并且以(cx, cy)为控制点 * `rect(x, y, width, height)`:绘制矩形路径 设置好路径之后,可以用 `fill()`方法填充或者用 `stroke()`方法描边,还可以用 `clip()`方法对下面的绘图作以限制(相当于PS的选区,详情参见[W3School](http://www.w3school.com.cn/tags/canvas_clip.asp)) ## 三.画图片 这个功能无疑是最重要的,简单的图形绘制并不是很实用(不信你拿坐标画个肖像画试试) ### 1.导入图像 1. 获得一个指向HTMLImageElement或者另一个canvas元素的引用作为源,也可以通过提供一个URL的方式来使用图片 图像源可以是img, video, canvas元素的引用,当然,也可以是当场创建的 `new Image()`,但要注意应该在新的Image对象的load事件处理器中引用它,否则因为图像没有加载完成,某些浏览器可能会出错。当然,此外还可以用Base64编码图像源。 2. 使用 `drawImage()`函数将图片绘制到画布上 * `drawImage(image, x, y)`:简单明了的好方法 * `drawImage(image, x, y, width, height)`:支持缩放 * `drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)`:支持裁剪(从大图里抠出一小部分,详情参见[MDN](https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Canvas_tutorial/Using_images)) ### 2.导出图像 这个当然要比图像操作更重要,拿着画布画了半天,该怎么把它导出成图片呢 `canvas.toDataURL()`:返回图像URL,直接把URL赋值给img的src就可以显示了,它就像一个普通图片地址一样,想怎么用就怎么用。但需要*注意*: 1. 图像不能来自其它域,嗯,没错,又是跨域安全限制,如果来自其它域,`toDataURL()`方法会抛出错误 2. 看清楚toDataURL方法是canvas的,而不是上面一直在用的ctx上下文对象的,而且方法名的大小写也比较特殊 ### 3.图像操作 canvas*最强大的功能*莫过于获取图像数据了,我们可以获取画布上每一点的色值,不用canvas能搞定吗?不能。所以简单的图像处理现在已经可以用js搞定了,而不需要后台函数的参与。 比如,对上文中的截图做一个简单的反色: ``` var canvas = document.getElementById(\\\\\\\'my_canvas\\\\\\\'); if(canvas.getContext){ var ctx = canvas.getContext(\\\\\\\'2d\\\\\\\');//获取2d上下文 //画图 var img = document.images[0]; ctx.drawImage(img, 0, 0); //获取ImageData var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); var data = imgData.data;//获取rgba(ImageData的data属性是每个像素点的rgba值) //反色 var r, g, b, a; for(var i = 0, len = data.length;i < len; i+=4){ //取色 r = data[i]; g = data[i+1]; b = data[i+2]; //a = data[i+3];//反色不需要透明度 //反色 data[i] = 255 - r; data[i+1] = 255 - g; data[i+2] = 255 - b; } imgData.data = data;//写回图像数据 ctx.putImageData(imgData, 0, 0);//显示结果 } ``` 处理效果还是很棒的,如下图: [![反色结果](http://ayqy.net/cms/wordpress/wp-content/uploads/2015/03/%E6%88%AA%E5%9B%BE-300x54.jpg)](http://ayqy.net/cms/wordpress/wp-content/uploads/2015/03/%E6%88%AA%E5%9B%BE.jpg) 需要注意一个小问题,Chrome不允许用drawImage画本地图片,所以上面的结果是FF下的,在测试Ajax的时候也遇到了类似问题,FF一般在限制跨域安全时不会限制本地资源,而Chrome会,对于服务器上的同源资源则不存在这样的差异。 ## 四.Canvas的更多功能 渐变、图案填充、线条控制、阴影、旋转、变形、缩放、组合、动画等等更多内容,后期再详细介绍。
点击查看更多
全部评论
登录
|
注册
关于作者
佚名用户
TA的个人主页
关注
已关注
文章
0
粉丝
0
获赞
0
评论
0
访问
20786
防抖节流
理解数据可视
如何简单快速的做出一个中国地图,并且显示各个省份数据(数据随机虚构)
好用的前端插件-
Canvas和SVG对比
推荐文章
ThreeJS 轮廓线特效 OutLinePath
(3)、React中使用ECharts——柱状图
31个惊艳的数据可视化作品,让你感受“数据之美”!
防抖节流
创建海洋特效组件 THREEJS 海洋效果 Shader实现
文章目录
文章分享
×
扫一扫分享
复制链接