HTML5-canvas标签结合简单实例讲解

关于Canvas的简单介绍

<canvas>元素是HTML5中的新元素，该标签只是图形容器，需要使用脚本语言来绘制图形。

浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持元素.

注意: Internet Explorer 8 及更早 IE 版本的浏览器不支持 <canvas> 元素.

创建一个简单的画布

【源代码】

<!DOCTYPE html>
<html>
<head><title>canvas</title><meta charset="utf-8"><style type="text/css">
.ca{border:1px solid #008B8B;
}</style>
</head>
<body>
<canvas id="myCanvas-color" width="250" height="150" class="ca"><!-- id属性比写且唯一；width和height不写也可以显示，如果对其有要求是要写的；canvas默认没有边框样式，需要设置才能看见边框范围，通过实践发现它不是块级元素，因为它不独占一行。 -->
</canvas><script type="text/javascript">var cvsc = document.getElementById("myCanvas-color"); //获取画布id为myCanvasvar var ctxc = cvsc.getContext('2d');//获取绘图2D环境ctxc.fillStyle = "#008B8B";//不写这句，会默认显示黑色ctxc.fillRect(20,20,200,100);//必须有，fillRect(x,y,width,height)方法定义了矩形当前的填充方式//其中x表示“矩形x坐标”；//y表示“矩形y坐标”；//width为矩形的宽；//height为矩形的高；</script>
</body>
</html>

【效果图】

【知识点】

fillStyle 属性设置或返回用于填充绘画的颜色、渐变或图案。

值	描述
color	指示绘图填充色的 CSS 颜色值。默认值是 #000000。
gradient	用于填充绘图的渐变对象（线性或放射性）。
pattern	用于填充绘图的 pattern 对象。

Canvas - 渐变

下面是线性渐变简单实例

【源代码】

<!DOCTYPE html>
<html>
<head><title>canvas</title><meta charset="utf-8"><style type="text/css">
.ca{border:1px solid #008B8B;
}</style>
</head>
<body>
<canvas id="myCanvas-grandient" width="250" height="150" class="ca"></canvas><script type="text/javascript">var cvsg = document.getElementById("myCanvas-grandient");var ctxg = cvsg.getContext("2d");var grd = ctxg.createLinearGradient(0,0,0,130);//JavaScript语法context.createLinearGradient(x0,y0,x1,y1);//其中x0表示“渐变开始点的x坐标”；//y0表示“渐变开始点的 y 坐标”；//x1表示“渐变结束点的 x 坐标”；//y1表示“渐变结束点的 y 坐标”；//补充：当其他值为0，x1大于0时为从左向右渐变；//当其他值为0，y1大于0时为从上到下渐变；grd.addColorStop(0,"#008B8B");grd.addColorStop(0.2,"#458B74");grd.addColorStop(0.4,"#458B74");grd.addColorStop(0.6,"#00EE76");grd.addColorStop(0.8,"#FFD700");grd.addColorStop(1,"#CD9B1D");ctxg.fillStyle=grd;ctxg.fillRect(20,20,200,120);</script>
</body>
</html>

【效果图】

【知识点】

createLinearGradient() 方法创建线性的渐变对象。

渐变可用于填充矩形、圆形、线条、文本等等。

提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。

提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。

使用格式：addColorStop(0~1,color);

下面是放射性渐变简单实例

【源代码】

<!DOCTYPE html>
<html>
<head><title>canvas</title><meta charset="utf-8"><style type="text/css">
.ca{border:1px solid #008B8B;
}</style>
</head>
<body>
<canvas id="myCanvas-radial" width="250" height="150" class="ca"></canvas><script type="text/javascript">var cvsr = document.getElementById("myCanvas-radial");var ctxr = cvsr.getContext("2d");var grd = ctxr.createRadialGradient(75,50,5,90,60,100);//JavaScript语法context.createRadialGradient(x0,y0,r0,x1,y1,r1);//其中x0表示“渐变的开始圆的 x 坐标”；//y0表示“渐变的开始圆的 y 坐标”；//r0表示“开始圆的半径”；//x1表示“渐变的结束圆的 x 坐标”；//y1表示“渐变的结束圆的 y 坐标”；//r1表示“结束圆的半径”；grd.addColorStop(0,"#008B8B");grd.addColorStop(0.2,"#458B74");grd.addColorStop(0.4,"#458B74");grd.addColorStop(0.6,"#00EE76");grd.addColorStop(0.8,"#FFD700");grd.addColorStop(1,"#CD9B1D");ctxr.fillStyle=grd;ctxr.fillRect(20,20,200,120);</script>
</body>
</html>

【效果图】

Canvas - 绘制图形简单实例

【源代码】

<!DOCTYPE html>
<html>
<head><title>canvas</title><meta charset="utf-8"><style type="text/css">
.ca{border:1px solid #008B8B;
}</style>
</head>
<body>
<canvas id="myCanvas-line" width="150" height="150" class="ca"></canvas><script type="text/javascript">var cvs = document.getElementById("myCanvas-line");var ctxl = cvs.getContext("2d");ctxl.moveTo(20,20);   //moveTo(x,y) 定义线条开始坐标;ctxl.lineTo(20,100);  //lineTo(x,y) 定义线条结束坐标;ctxl.lineTo(100,100);ctxl.lineTo(100,20);ctxl.lineTo(20,20);ctxl.stroke();  //使用 stroke() 方法来绘制线条:</script>
</body>
</html>

【效果图】

如果你看懂了试着思考一下下面的图形怎么绘制吧~大胆尝试

Canvas - 图案

【源代码】

<!DOCTYPE html>
<html>
<head><title>canvas</title><meta charset="utf-8"><style type="text/css">
.ca{border:1px solid #008B8B;
}</style>
</head>
<body>
<canvas id="myCanvas-pattern" width="370" height="350" class="ca"></canvas><img src="../images/a1.jpg" id="lamp" width="50" height="50"><script type="text/javascript">var cvsp = document.getElementById("myCanvas-pattern");var ctxp = cvsp.getContext("2d");var img = document.getElementById("lamp");//方法一开始：var pat = ctxP.createPattern(img,"no-repeat");//可以设置图片重复方式ctxP.rect(0,0,150,100);ctxP.fillStyle=pat;ctxP.fill();//方法一结束；//如果方法一没有显示出效果，将方法一部分内容注释掉，尝试方法二：// img.onload = function(){//     ctxp.drawImage(img,10,10);// }</script>
</body>
</html>

【效果图】

Canvas - 文本

【源代码】

<!DOCTYPE html>
<html>
<head><title>canvas</title><meta charset="utf-8"><style type="text/css">
.ca{border:1px solid #008B8B;
}</style>
</head>
<body>
<canvas id="myCanvas-text" width="250" height="150" class="ca"></canvas><script type="text/javascript">var cvs = document.getElementById("myCanvas-text");var ctext = cvs.getContext("2d");ctext.font = "30px Arial";ctext.strokeText("我真帅!",20,100);//fillText定义实心的文本；//JavaScript语法：stroke(text,x,y)；//其中text为显示文本；x表示“文本的x坐标”；//y表示“文本的y坐标”；</script>
</body>
</html>

【效果图】

Canvas - 渐变色文本

【源代码】

<!DOCTYPE html>
<html>
<head><title>canvas</title><meta charset="utf-8"><style type="text/css">
.ca{border:1px solid #008B8B;
}</style>
</head>
<body>
<canvas id="myCanvasText" width="260" height="150" class="ca"></canvas><script type="text/javascript">var cvsT = document.getElementById("myCanvasText");var ctxT = cvsT.getContext("2d");var grd = ctxT.createLinearGradient(0,0,cvsT.width,0);grd.addColorStop(0,"#cb1310");grd.addColorStop(0.2,"#cb3b10");grd.addColorStop(0.4,"#cb7b10");grd.addColorStop(0.6,"#cbaa10");grd.addColorStop(0.8,"#c7cb10");grd.addColorStop(1,"#72cb10");ctxT.font = "50px myFirstFont";ctxT.fillStyle=grd;ctxT.fillText("JavaScript",10,110);</script>
</body>
</html>

【效果图】

更多内容详情请查看链接点击打开链接