html5之canvas实例(一)

<!DOCTYPE html>

<html>
<head><meta charset="UTF-8"></head>
<body>

<canvas id="t_canvas" width="1000" height="1000" ></canvas>

<script type="text/javascript">
//画布,将图形画到这上面,超出范围的不显示
var t_canvas1=document.getElementById("t_canvas");
var context1=t_canvas1.getContext("2d");

context1.beginPath();
context1.moveTo(0,0);
context1.lineTo(0,290);
context1.lineTo(290,290);
context1.closePath();
context1.fillStyle="rgb(200,0,0)";
context1.fill();

/////绘图1
context1.fillStyle="#000000";
context1.fillRect(300,300,100,100);
context1.fillStyle="#000000";
context1.fillRect(100,100,100,100);
context1.fillRect(50,50,100,100);
</script>



</body>
</html>


 

 

 

 

 

截图如下:

 

 

html5之canvas实例(一)_第1张图片

 

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(html5之canvas实例(一))