HTML5的学习之路
HTML 5 Canvas
canvas 元素用于在网页上绘制图形。
什么是 Canvas?
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度:
<canvas id="myCanvas" width="200" height="100"></canvas>
通过 JavaScript 来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript 使用 id 来寻找 canvas 元素:
var c=document.getElementById("myCanvas");
然后,创建 context 对象:
var cxt=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形:
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。
fillRect 方法拥有参数 (0,0,150,75)。
意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。
实例
绘制一个矩形和文字
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* { margin: 0; padding: 0; border: none;}
#cav,#cav1 { float: left; border: 1px solid #6f6f6d;}
</style>
</head>
<body>
<canvas id="cav" width="300" height="300"></canvas>
<canvas id="cav1" width="300" height="300"></canvas>
<script type="text/javascript">
var cav = document.getElementById("cav");
var ctx = cav.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,10,200,200);
var cav1=document.getElementById("cav1");
var ctx1=cav1.getContext("2d");
ctx1.fillStyle="red";
ctx1.font="20px Georgia";
ctx1.fillText("This is LittleLi's blog",0,20,300);
//渐变文字
ctx1.font="30px Verdana";
// 创建渐变
var gradient=ctx1.createLinearGradient(0,0,cav1.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变填色
ctx1.fillStyle=gradient;
ctx1.fillText("Thisis LittleLi's blog",0,90);
</script>
</body>
</html>
注意:canvas是有默认的宽高的,style中设置的是整个<canvas>
中的宽高会影响绘制内容的大小;而<canvas>
标签中设置的宽高是不会影响的。
绘制一条直线和一个圆和把图像绘制到画布上
JavaScript语法:context.arc(x,y,r,sAngle,eAngle,counterclockwise);参数分别是x、y是圆心坐标,然后是起始角、结束角(以弧度计),最后是规定逆时针还是顺时针绘制(可选项),false=顺时针,true=逆时针。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* { margin: 0; padding: 0; border: none;}
#cav,#cav1,#cav2 { border: 1px solid #6f6f6d;}
</style>
</head>
<body>
<canvas id="cav" width="200" height="200">Your browser does not support the canvas element.</canvas>
<canvas id="cav1" width="200" height="200">Your browser does not support the canvas element.</canvas>
<canvas id="cav2" width="200" height="200">Your browser does not support the canvas element.</canvas>
<img src="a.png" id="img">
<script type="text/javascript">
var cav = document.getElementById("cav");
var cav1 = document.getElementById("cav1");
var cav2 = document.getElementById("cav2");
var ctx = cav.getContext("2d");
var ctx1 = cav1.getContext("2d");
var ctx2 = cav2.getContext("2d");
//直线
ctx.moveTo(0,0);
ctx.lineTo(50,50);
ctx.lineTo(50,150);
ctx.stroke();
//圆形
ctx1.fillStyle="red";
ctx1.beginPath();
ctx1.arc(30,30,30,0,Math.PI*2,true);
ctx1.closePath();
ctx1.fill();
//把一幅图像放置到画布上
var img = document.getElementById("img");
img.onload=function(){ctx2.drawImage(img,0,0);}
</script>
</body>
</html>
注意:有很多浏览器会限价在JavaScript代码,之后才加载图片,就造成了图片还没加载出来,所以将对象放在onload事件中,就能确保当image载入浏览器中之后才使用drawImage。
LittleLi
2016/12/28 13:13:12