HTML5中如何使用canvas-创新互联

小编给大家分享一下HTML5中如何使用canvas，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

新元素

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

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

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

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

画方

$(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();　　　　　　//绘制线条

            })

运行结果：

画圆

$(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();
})canvas{border: 1px solid #000;}

运行结果：

渐变

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

运行结果：

图像

canvas{border: 1px solid #000;}#flower{border: 1px solid #000;width: 100px;height: 100px;}$(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）}
            })

运行结果：

（右图为canvas图像）

以上是“HTML5中如何使用canvas”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联网站制作公司行业资讯频道！