码迷,mamicode.com
首页 > 其他好文 > 详细

canvas知识点

时间:2019-07-01 14:14:18      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:环境   blur   位置   加载完成   绘画   mic   动画效果   图片   旋转   

 

           canvas知识点:const canvas = document.getElementById(‘id‘);  //获取canvas元素

                                     const ctx = canvas.getContext(‘2d‘);  //搭建图形需要环境,简单来说就是绘画的画布

                                     然后所有的canvas方法都是建立在ctx画布之上,

                                     0.基本上通用方法:

                                                        ctx.strokeStyle = ‘‘; //描边的样式,默认是黑色

                                                        ctx.lineWidth =‘‘; //描边的宽度

                                                        ctx.stroke();  //描边,也就是将画的线显示出来

                                                        ctx.beginPath();  //如果再想画一个,需要把画笔拿起来,重新开始

                                                        ctx.closePath(); //最后一个点与第一个点连接起来,成为一个多边形,将直线变为图形

                                                        ctx.fillStyle =‘‘; //图形填充的样式

                                                        ctx.fill(); //填充,将画的图形在画布上显示出来;注意:矩形的填充是ctx.fillRect(x,y,width,height)

                                                       ctx.clearRect(x,y,width,height); //清除画布内容

 

                                     1.画直线:ctx.moveTo(x,y);//起点   

                                                       ctx.lineTo(x,y);//画笔停止位置,后面可以接着ctx.lineTo(x,y)

                                                      技术图片

                                      2.画圆:ctx.arc(cx,cy,r,0,2*Math.PI,true); //cx,cy圆心位置,r是半径,0和2*Math.PI是圆起始和结束弧度,true顺时针画

                                                    结束弧度如果不是360度,就可以画圆弧

                                                    技术图片

                                     3.画矩形:ctx.strokeRect(x,y,width,height);画矩形不需要ctx.stroke(),因为方法名中就包含了stroke;

                                     4.形状的变化: 作用会叠加,原点会保存之前形状的原点;

                                               ctx.translate(x,y);//平移,是坐标原点(0,0)的移动

                                               ctx.rotate();  //旋转

                                               ctx.sale(x,y); //缩放

                                               技术图片

                                              ctx.save()和ctx.restore()成对出现;ctx.save()保存当前环境,ctx.restore()恢复当前环境

                                               技术图片

                                     6.canvas文字

                                             填充文字 ctx.fillText(‘文字‘,x,y);  //x,y是放入文字的坐标

                                             描边文字 ctx.strokeText(‘文字‘,x,y);

                                             ctx.font=‘‘; //字体样式,

                                             ctx.textAlign = ‘center/left/right‘ ;//水平对齐方式

                                             ctx.textBaseline = ‘top/middle/bottom‘;//垂直对齐方式

                                             const width = ctx.measureText(文字变量).width; //获取文本宽度

                                      7.图形的剪切,图片必须加载完成后,才能剪切,必须放在实例化image的onload里   ctx.drawImage(img,startX,startY,endX,endY,x,y,width,height)

                                       技术图片 

                                     8.重叠部分的剪切;ctx.clip();只会显示重叠部分

                                       技术图片

                                    9.canvas阴影,设置后对后面所有都会有阴影,不过可以用ctx.save()和ctx.restore()解决

                                      ctx.shadowOffsetX=‘‘;//x轴偏移; ctx.shadowOffsetY=‘‘;//y轴偏移

                                      ctx.shadowColor=‘‘;       ctx.shadowBlur =‘‘; //边缘模糊距离

                                    10.动画,利用定时器不停得到清除画布内容,ctx.clearRect(x,y,width,height),

                                                   然后不停的绘制,就能实现动画效果

                                    11.离屏;再创建一个新的canvas,把复杂切不需要重复绘制的图形放在这个画布上,

                                                   再通过ctx.drawImage()方法,将这个canvas图形剪切并放在第一个canvas上

                                                   注意:离屏的canvas记得设置为隐藏

                                    

 

                                                  

 

                                              

 

canvas知识点

标签:环境   blur   位置   加载完成   绘画   mic   动画效果   图片   旋转   

原文地址:https://www.cnblogs.com/fanbulaile/p/11113374.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!