带你了解html5中的canvas

Posted WS前端学习

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了带你了解html5中的canvas相关的知识,希望对你有一定的参考价值。

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

 

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

 

创建canvas元素

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

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

<!-- canvas的宽200px,100px idmyCanvas -->  

 

通过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.绘制一个矩形,因为需求要求矩形以中心为轴进行旋转,但是canvasrotate只能以画布左上角为轴,进行旋转

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

 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);


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


以上是关于带你了解html5中的canvas的主要内容,如果未能解决你的问题,请参考以下文章

Carson带你学Android:自定义View Canvas类使用教程

HTML5 中的 canvas 画布

HTML5中的Canvas

html5硬件中的canvas元素是不是加速?

HTML5 Canvas - 如何在画布中的图像上绘制矩形

HTML5中的Canvas API