带你了解html5中的canvas

Posted 2021-06-15 WS前端学习

接下来将为大家介绍html5新更新的元素canvas

 

canvas元素用于在网页上回绘制图形，画布是一个矩形的区域，在该区域内，你可以控制每一个像素，而且canvas拥有很多绘制路径，矩形，圆形，字符以及添加图像的方法。

 

创建canvas元素

向页面添加canvas元素，且规定元素的id，宽度和高度。

<canvas id="myCanvas" width="200" height="100"></canvas>      

<!-- canvas的宽200px,高100px， id为myCanvas -->  

 

通过javascript（简称js）来进行绘制

canvas元素本身是没有绘图能力的，必须使用js来控制。

var myCanvas=document.getElementById("myCanvas")   

//通过id元素寻找canvas元素

var ctx=myCanvas.getContext('2d')     

//创建context对象，getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

ctx.fillStyle="blue"    //填充颜色

ctx.fillRect(0,0,140,70) //fillRect 方法规定了形状、位置和尺寸

 

 

ctx.beginPath()  //开始新的路径或者重置当前路径

ctx.moveTo(10,10);  //画笔起点

ctx.lineTo(150,50); //画笔转折点

ctx.lineTo(10,50);  //画笔终点

ctx.strokeStyle="red"; //画笔颜色

ctx.stroke();   //绘制已定义的路线

ctx.clearRect(0,0,150,50)  

//清除画布 0起始横坐标，0起始纵坐标，150宽度，50高度

 

ctx.strokeRect(0,0,150,50)  //绘制无填充矩形

 

 

 

转换

transform()重新映射画布上的 (0,0) 位置

rotate()旋转当前绘图.

ctx.translate(400,400);

var timer=setInterval(function(){ 

 //1.定义一个旋转的方法,确定每次时间间隔中要旋转多少弧度

 ctx.rotate(0.01*Math.PI);

  //2.绘制一个矩形，因为需求要求矩形以中心为轴进行旋转，但是canvas中rotate只能以画布左上角为轴，进行旋转

//因此，只要使矩形的中心和画布的左上角重合就可以了(起点的横纵坐标为矩形宽高的一半)

 ctx.strokeRect(-150,-100,400,300);

 ctx.clearRect(-150,-100,400,300)

},50);

 

 转换结果如下图所示

font 设置或返回文本内容的当前字体属性

textAlign 设置或返回文本内容的当前对齐方式

fillText() 在画布上绘制“被填充的”文本

strokeText() 在画布上绘制文本，无填充。

ctx.font="20px Georgia"; //字体样式

ctx.font="30px Verdana";

 // 创建渐变

 var gradient=ctx.createLinearGradient(0,0,myCanvas.width,0);

  gradient.addColorStop("0","magenta");

  gradient.addColorStop("0.5","blue");

gradient.addColorStop("1.0","red");

// 用渐变填色

ctx.strokeStyle=gradient;

ctx.strokeText("WS前端开发",10,90);

还有一些不常用的我就没放上来了，需要了解的请自行百度哟。