LLMjiayou7

一、canvas元素的基础知识

canvas元素是html5中新增的一个重要的元素,专门用来绘制图形。在页面上放置了一个canvas元素,就相当于在页面上放置了一块“画布”,可以在其中绘画图形。但是在canvas中绘图,并不是用鼠标画图。事实上,canvas元素只是一块无色透明的区域。需要使用javascript编写在其中进行绘画的脚本。从这个角度来说,可以把他理解为类似其他开发语言中的canvas画布。

1、在页面中放置canvas元素,首先要指定的是id、width、height三个属性。

事例代码如下:

<body onload="draw('canvas1')">
<canvas id="canvas1" width="200" height="200"></canvas>
<script type="text/javascript">
    function draw(id){
    var canvas=document.getElementById(id);
    var context=canvas.getContext('2d');    //不可以设为3d、4d 
    context.fillStyle="#ddd";
    context.fillRect(10,10,120,100);
    lineWidth=2;
    context.strokeStyle="blue";    //这一步边框没有出现
    context.strokeRect(20,20,100,100);
}
</script>

运行结果:

 

2、用canvas元素绘制图形时,需要经过几个步骤:

(1)获取canvas元素,首先使用document.getElementById等方法获取canvas对象,因为需要调用这个对象提供的方法来绘制图形。

(2)获取上下文(context),绘制图形时,需要用到图形上下文,图形上下文是一个封装了很多绘图功能的对象。需要使用canvas对象的getContext方法获得图形上下文

(3)填充与绘制边框,用cavas绘制图形时,有两种方式——填充(fill)与绘制边框(stroke),填充是指填满图形的内部;绘制边框是不填满图形的内部,只绘制图形的外框。

(4)设定绘图样式,所谓绘图的样式,主要是针对图形的颜色而言,但并不限于图形的颜色。

       fillStyle属性:在该属性中填入填充的颜色

       strokeStyle属性:在该属性中填入边框的颜色

       lineWidth属性:指定边框的宽度

       fillRect属性:用来填充矩形     context.fillRect(x,y,width,height)

       strokeRect属性:用来绘制矩形的边框    context.strokeRect(x,y,width,height)

       clearRect属性:擦除指定的矩形区域     context.clearRect(x,y,width,heigth)

  (5)  指定线宽

(6)绘制矩形

二、使用路径

1、绘制图形,要想绘制矩形以外的图形,需要使用路径。同样,绘制开始时要获取图形上下文,然后执行以下步骤:

(1)开始创建路径,使用图形上下文对象的beginPath方法,该方法不使用参数,在循环中的几次创建路径的过程中,每次开始创建时都要调用beginPath函数。

(2)创建图形的路径,使用图形上下文的arc方法,context.arc(x,y,radius,startAngle,endAngle,anticlockwise),x为绘制圆形的起点横坐标,y为起点的纵坐标,radius为圆形半径,startAngle为开始角度,endAngle为结束角度,anticlockwise为是否按逆时针方向绘制。

(3)关闭路径,context.closePath();

(4)设定绘制样式,进行图形绘制

 

分类:

Html5

技术点:

相关文章: