HTML5canvas元素

男娘i 2022-07-30 16:25 304阅读 0赞

一、canvas基础知识  
1.简介：canvas元素是H5中的一个图形容器，它本身不具备任何行为使用者必须把它与脚本结合起来绘制图形。  
2.canvasAPI：使用canvas绘图时并不是直接绘制到屏幕上，而是先画到一个上下文context上，然后再刷新到屏幕上。每个canvas元素都对应一个context对象，并且该对象是惟一的。CanvasAPI定义在这个context对象上，因此需要获取context对象  
var canvas = document.getElemntById(“mycanvas”);  
if(canvas.getContext)\{  
var ctx = canvas.getContext(“2d”); //参数2D表示生成2d平面图案（3D）  
\}  
二、绘制文本  
通过js代码为页面指定事件  
window.onload = function()\{  
var title = “静夜思”;  
var canvas = document.getElementById(“mycanvas”); //取得canvas元素  
if(canvas.getContext)\{  
var context = canvas.getContext(“2d”); //取得上下文，是一个封装了很多绘图功能的对象  
context.font=”blod 30px 微软雅黑”; //设置字体样式  
context.strokeStyle=”red”;  
context.strokeText(title,250,30);  
context.font=” italic 18px 隶书”;  
context.fillStyle=”blue”; //设置字体颜色  
context.fillText(“床前明月光,”,’200’,160,200);  
context.fillText(“疑是地上霜。,”,’200’,200,200);  
context.fillText(“举头望明月,”,’200’,240,200);  
context.fillText(“低头思故乡。”,’200’,280,200); //context.fillText(text,x,y,maxwidth);  
\}  
\}  
file：填充整个图形内部 stroke：值绘制图形的外框  
![文字效果图][20160419201702299]  
三、绘制矩形  
1.rect()方法绘制  
rect(）用于创建矩形，创建完毕之后需要调用fill()和stroke()方法在画布上实际绘制图形。  
context.rect(x,y,width,height);  
2.fillRect()方法绘制  
绘制被填充的矩形，默认的颜色是黑色。可以使用fillStyle属性来设置用于绘图的颜色、渐变、或者模式  
四、绘制路径

五、贝塞尔曲线  
上下文对象提供了两种绘制贝塞尔曲线的方法  
1.quadraticCurveTo（）方法  
使用表示二次方贝塞尔曲线的指定控制点，向当前路径添加点。二次方贝塞尔曲线曲线需要两个点，第一个点是用于贝塞尔计算中的控制点，第二个是曲线的结束点。  
基本语法：contex。quadraticCurveTo（cpx，cpy，x，y）；  
cpx，cpy表示贝塞尔控制点的x坐标和y坐标；x和y则表示结束点的x坐标和y坐标  
2.bezierCurveTo()方法  
使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。三次贝塞尔曲线需要三个点：前两个是用于三次贝塞尔计算中的控制点，第三个是曲线的结束点  
基本语法bezierCurveTo（cp1x,cp1y,cp2x,cp2y,x,y)  
cp1x和cp2y分别表示第一个贝塞尔控制点的xy坐标，cp2x和cp2y分别表示第二个贝塞尔控制点的xy坐标，xy分别表示结束点的xy坐标

[20160419201702299]: /images/20220724/545a4c3a456c4daa8cd27e8e65648238.png