canvas的基本应用

html5的canvas元素使用JavaScript在网页上绘制图像

画布是一个矩形区域，可以控制其每一个像素

canvas拥有多种绘制路径，矩形，圆形，字符以及添加图像的方法。

 

 

HTML添加canvas元素  规定元素的ID，宽度和高度

<canvas id="canvas" width="200" height="100"></canvas>

 

 

javascript使用ID来寻找canvas元素

//制作矩形
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

//制作线性

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50)
cxt.lineTo(10,50)
cxt.stroke()

//制作圆形

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

</script>

var c=document.getElementById("canvas");

然后创建context对象

var cxt=c.getContext("2d");

下面两行代码绘制一个红色矩形

cxt.fillStyle="red";

cxt.fillRect(0,0,100,100);

fillStyle方法将其染成红色  filllRect方法规定了形状，位置和尺寸