canvas入门（一）

<canvas../>元素它是专门用来绘制图形的，但是它自身并不绘制图形，他只是相当于一块空的画布，任由开发者在其上利用javascript脚本进行绘制。

一般绘图需要一下.1：先获取canvas对应的dom对象，2.调用canvas对象的getContext（）方法，3.调用CanvasRenderingContext2D对象的方法绘图。

这是一个简单的例子：

<body>
  <canvas id="cvs"></canvas>
<script>
 var cvs=document.getElementById('cvs');

 var ctx=cvs.getContext('2d');
//  设置填充颜色
 ctx.fillStyle='black';
//  绘制矩形
 ctx.fillRect(30,40,80,100)
    
</script>

</body>

 

posted @ 2017-04-11 22:26  Athena-web  阅读(122)  评论(0)  编辑  收藏  举报