当前位置:Gxlcms > html代码 > HTML5-canvas的使用方法介绍

HTML5-canvas的使用方法介绍

时间:2021-07-01 10:21:17 帮助过:12人阅读

<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的使用方法介绍的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行