javascript中canvas绘图的基本用法

来源：互联网发布：台风战机参数知乎编辑：程序博客网时间：2024/05/16 10:48

<canvas>是HTML里面非常强大的元素，利用它结合js可以实现很多动画效果，大大增强交互性。下面，我想用图文并茂的方式阐述一下canvas的绘图机制的基础内容，话不多说，先上代码：

HTML的内容很简单，就是一个画布canvas，其中width和height属性指定了画布的宽和高，并且我设置background为蓝色

<span style="font-size:12px;"><body><canvas id="canvas"  width="200" height="200" style="background:blue;"></canvas></body></span>

以下为javascript的代码：首先是从DOM中获取canvas对象,然后通过canvas.getContext("上下文对象的名字（如2d）")方法从画布中获取上下文对象，if(canvas.getContext("2d")){。。。}这一条语句很重要，它用于检测getcontext()方法是否存在，某些浏览器是无法检测到getcontext()方法的（如firefox 3）。context对象的strokestyle和fillstyle属性分别用于设置描边和填充的颜色，调用context.fillRect(x1,y1,x2,y2)和context.strokeRect(x1,y1,x2,y2)分别用于描边和填充一个矩形（参数意义见代码注释）

<span style="font-size:12px;"><script type="text/javascript">       var canvas=document.getElementById("canvas");//获取画布       if(canvas.getContext("2d")){//检测是否能获取context对象       var context=canvas.getContext("2d");//从画布中获取上下文对象       context.strokeStyle="red";//设置描边的颜色       context.fillStyle="#008000"//设置填充的颜色       context.fillRect(10,10,50,50);//填充一个矩形，四个坐标分别为起始X,Y坐标和矩形的长宽       context.strokeRect(10,10,50,50);//画一个矩形，四个坐标分别为起始X,Y坐标和矩形的长宽       }</script></span>

demo的效果如下：

顺带一提，参数中的起点（x1,y1）是以canvas左上角为原点（0，0）计算的：(画图很渣，见谅)

canvas机制里还有一个clearRect(x1,y1,x2,y2)方法可用于清空canvas里的一个矩形区域，四个坐标分别为起始X,Y坐标和矩形的宽和高，代码如下

<pre name="code" class="javascript"><script type="text/javascript">       var canvas=document.getElementById("canvas");//获取画布       if(canvas.getContext("2d")){       var context=canvas.getContext("2d");//从画布中获取上下文对象       context.strokeStyle="red";//设置描边的颜色       context.fillStyle="#008000"//设置填充的颜色       context.fillRect(10,10,50,50);//填充一个矩形，四个坐标分别为起始X,Y坐标和矩形的长宽       context.strokeRect(10,10,50,50);//画一个矩形，四个坐标分别为起始X,Y坐标和矩形的长宽       context.clearRect(20,20,10,10);//清空一个矩形区域       }</script>

demo如下：

图中绿色的矩形区域中出现了一块空的矩形区域，显现出canvas的background的颜色--蓝色；

那么，大家可能会问，canvas的内容能不能转化为一张png或者jpg格式的图片呢？这当然是可以的，下面我就给大家演示一下:

<script type="text/javascript">       var canvas=document.getElementById("canvas");//获取画布       if(canvas.getContext("2d")){       var context=canvas.getContext("2d");//从画布中获取上下文对象       context.strokeStyle="red";//设置描边的颜色       context.fillStyle="#008000"//设置填充的颜色       context.fillRect(10,10,50,50);//填充一个矩形，四个坐标分别为起始X,Y坐标和矩形的长宽       context.strokeRect(10,10,50,50);//画一个矩形，四个坐标分别为起始X,Y坐标和矩形的长宽       context.clearRect(20,20,10,10);//清空一个矩形区域       var url= canvas.toDataURL();//将当前的画布（canvas）转化为url;       var img=document.createElement("img");//创建一个img元素，并指定其src属性为url       img.src=url;       document.getElementsByTagName("body")[0].appendChild(img);//在当前body里追加新创建的img元素</span>       }</script>

demo如下所示：（canvas的右边显示了一张与canvas内容相同的图片）

通过调用canvas的.toDataURL()方法可以将当前的画布（canvas）转化为url，同时（）里的参数可以指定图片的格式，如canvas.toDataURL("image/jpg")则指定图片格式为jpg格式，若不指定则默认是png格式。HTML中的<img/>元素中有src属性，通过src="图片的url"便可以轻松引用图片啦！怎么样？很简单吧。

下面介绍一下canvas绘制路径的机制：

首先调用context.beginPath()方法开始绘图路径
然后通过调用一系列的方法绘制路径
最后通过调用context.stroke方法便可以将绘制的路径描绘出来

<script type="text/javascript">       var canvas=document.getElementById("canvas");//获取画布       if(canvas.getContext("2d")){       var context=canvas.getContext("2d");//从画布中获取上下文对象       context.strokeStyle="red";//设置描边的颜色                        context.beginPath();//开始绘图路径       context.arc(50,50,49,0,Math.PI*2,true);//绘制外圆       context.stroke();//描边       }</script>

context.arc()中各个参数的意义：context.arc(绘图圆心 ,绘图圆心, 圆弧半径,起始角度，结束角度，逆时针绘制（true）或顺时针绘制（false）)

demo如下，表示是以（50,50）为圆心，49为半径，按逆时针的方式从0绘制到2π的一个圆。

接下来我们再在大圆的中间画一个小圆：

<script type="text/javascript">       var canvas=document.getElementById("canvas");//获取画布       if(canvas.getContext("2d")){       var context=canvas.getContext("2d");//从画布中获取上下文对象       context.strokeStyle="red";//设置描边的颜色                        context.beginPath();//开始绘图路径       context.arc(50,50,49,0,Math.PI*2,true);//绘制外圆       context.arc(50,50,30,0,Math.PI*2,true);//绘制内圆       context.stroke();//描边       }</script>

调用两次的context.arc()方法，demo如下;

那么问题就来了，为什么两圆的起始角（0度角）上会有一条线段呢？

原来，canvas绘图时是按照游标移动的方式进行绘制的，画完大圆时，canvas游标刚好又回到了大圆的0度角的位置，而小圆是从小圆的0度角开始绘制的，所以游标需要从大圆的0度角沿直线经过到小圆的0度角的位置，因此形成了这条线段。

那怎么才能去除这条线段呢？别急，canvas机制中有一个context.moveTo(X,Y)方法，能控制游标移动到相应的位置，只要我们在绘制完大圆之后，把游标移动到绘制小圆的初始位置上，不就可以了吗？代码如下，

<script type="text/javascript">       var canvas=document.getElementById("canvas");//获取画布       if(canvas.getContext("2d")){       var context=canvas.getContext("2d");//从画布中获取上下文对象       context.strokeStyle="red";//设置描边的颜色                        context.beginPath();//开始绘图路径       context.arc(50,50,49,0,Math.PI*2,true);//绘制外圆       context.moveTo(80,50);//移动画笔游标到开始画内圆的位置       context.arc(50,50,30,0,Math.PI*2,true);//绘制内圆       context.stroke();//描边       }</script>

这时，线段也就消失啦！

我们还可以用同样的方式去绘制线段，context.lineto(X，Y)表示从上一点（canvas游标所在位置）移动到（X,Y）所在位置，让我们在小圆里面绘制两条垂直交叉的线段吧

<script type="text/javascript">       var canvas=document.getElementById("canvas");//获取画布       if(canvas.getContext("2d")){       var context=canvas.getContext("2d");//从画布中获取上下文对象       context.strokeStyle="red";//设置描边的颜色                        context.beginPath();//开始绘图路径       context.arc(50,50,49,0,Math.PI*2,true);//绘制外圆       context.moveTo(80,50);//移动画笔游标到开始画内圆的位置       context.arc(50,50,30,0,Math.PI*2,true);//绘制内圆       context.moveTo(50,50);       context.lineTo(50,25);       context.moveTo(50,50);       context.lineTo(25,50);       context.stroke();//描边       }</script>

demo如下，是不是很像一个闹钟呢？

总结：其实canvas的内容非常丰富，我以上的内容讲解的不过是冰山一角，很多东西都需要深入的去学习。希望能带给大家一点点帮助吧！

0 0