首页 > 代码库 > canvas的基本应用

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方法规定了形状,位置和尺寸

 

canvas的基本应用