HTML5-canvas的使用方法介绍

canvas 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

canvas 标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

注意: 默认情况下 canvas 元素没有边框和内容。

画方

 !--fillStyle是填充样式，如果不设置fillStyle属性，默认填充色为黑色，fillRect是画一个矩形，参数为X,Y,Width,Height-- !DOCTYPE html html head meta charset= UTF-8 name= author content= 赵慧娟 title /title script src= Scripts/jquery-1.10.2.js?1.1.10 /script script type= text/javascript $(function(){var canvas=document.getElementById( myCanvas )var ctx=canvas.getContext( 2d ); ctx.fill > //ctx.moveTo(0,0); //定义开始坐标
 //ctx.lineTo(100,100); //定义结束坐标
 //ctx.stroke(); //绘制线条

 }) /script /head body canvas id= myCanvas width= 100 height= 100 /canvas /body /html 

运行结果：

画圆

 !--arc画圆，参数是X,Y,半径，起始角，结束角，顺时针/逆时针(可选)XY指的是圆点的距离-- !DOCTYPE html html head meta charset= UTF-8 name= author content= 赵慧娟 title /title script src= Scripts/jquery-1.10.2.js?1.1.10 /script script type= text/javascript $(function(){var canvas=document.getElementById( myCanvas )var ctx=canvas.getContext( 2d ); ctx.fill > //ctx.fillText( Hello World ,10,50); //绘制实心字体
 //ctx.strokeText( Hello World ,10,50); //绘制空心字体
}) /script style type= text/css canvas{border: 1px solid #000;} /style /head body canvas id= myCanvas width= 100 height= 100 /canvas /body /html 

运行结果：

渐变

createLinearGradient(x,y,x1,y1) - 创建线条渐变

createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

// 创建渐变var grd=ctx.createLinearGradient(0,0,200,0);grd.addColorStop(0, red grd.addColorStop(1, blue // 填充渐变ctx.fill >
运行结果：
 径向/圆渐变
var c=document.getElementById( myCanvas var ctx=c.getContext( 2d // 创建渐变var grd=ctx.createRadialGradient(75,50,5,90,60,100);grd.addColorStop(0, red grd.addColorStop(1, white // 填充渐变ctx.fill >
运行结果：
图像
 !DOCTYPE html html head meta charset= UTF-8 name= author content= 赵慧娟 title /title script src= Scripts/jquery-1.10.2.js?1.1.10 /script style type= text/css canvas{border: 1px solid #000;}#flower{border: 1px solid #000;width: 100px;height: 100px;} /style /head body img src= img/a.ico id= flower / canvas id= myCanvas width= 100 height= 100 /canvas script type= text/javascript $(function(){var canvas=document.getElementById( myCanvas )var ctx=canvas.getContext( 2d var img=document.getElementById( flower  img.onload=function(){ ctx.drawImage(img,20,20,80,80); //drawImage（对象，X,Y，W,H）} }) /script /body /html 
运行结果：
（右图为canvas图像）
以上就是HTML5-canvas的使用方法介绍的详细内容，其它编程语言        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。