Canvas提供了开发者自定义绘图的接口,我们可以公国getContext()函数来获取绘图上下文进行绘制操作,这个函数中可以传入两个参数,其中第1个参数设置绘图上下文的类型,比较常用的是"2d",我们也可以使用"webgl"来使用webOpenGL实现3D绘制。本篇博客主要总结2d绘制的相关方法。
1.进行简单的图形绘制
使用Canvas进行平面图形绘制比较简单。例如使用如下函数则可以直接绘制一个矩形区域。
var c = document.getElementById("canvas");
var context = c.getContext("2d");
context.strokeRect(20,20,100,100);
图形效果如下:
var c = document.getElementById("canvas");
var context = c.getContext("2d");
context.fillRect(20,20,100,100);