HTML5-canvas的使用方法介绍

<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.fillStyle=deeppink;
                ctx.fillRect(10,10,100,100);
　　　　　　　　  //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.fillStyle=deeppink;
                ctx.arc(50,50,50,0,2*Math.PI);
                ctx.stroke();
　　　　　　　　　//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.fillStyle=grd;
ctx.fillRect(10,10,150,80);

运行结果：

　　径向/圆渐变

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.fillStyle=grd;
ctx.fillRect(10,10,150,80);

运行结果：

图像

<!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的使用方法介绍

相关推荐