一、canvas元素的基础知识

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

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

事例代码如下：

  1. <body onload="draw('canvas')">
  2.     <canvas id="canvas" width="" height=""></canvas>
  3. </body>
  4. </html>
  5. <script type="text/javascript">
  6.     function draw(id){
  7.         var canvas=document.getElementById(id);    //获取canvas元素
  8.         var context=canvas.getContext("2d");       //获得图形上下文
  9.         context.fillStyle="#ddd";                  //设定绘图样式
  10.         context.fillRect(,,,);           //绘制矩形
  11.         context.fillStyle="red";
  12.         context.fillRect(,,,);             //绘制第二个矩形
  13.         context.lineWidth=;                       //设置变宽
  14.         context.strokeStyle="blue";               //填充边框
  15.         context.strokeRect(,,,)            //绘制边框
  16.     }
  17. </script>

运行结果：

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

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

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

（3）填充与绘制边框，用canvas绘制图形时，有两种方式——填充（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）设定绘制样式，进行图形绘制

代码清单如下：

  1. <body onload="draw('canvas1')">
  2. <canvas id="canvas1" width="" height=""></canvas>
  3. <script type="text/javascript">
  4.     function draw(id){
  5.     var canvas=document.getElementById(id);
  6.     var context=canvas.getContext('2d');    //不可以设为3d、4d
  7.     context.fillStyle="#ddd";               //填充矩形
  8.     context.fillRect(,,,);       //绘制矩形
  9.     var n=;
  10.     for(var i=;i<;i++){
  11.         context.beginPath();       //开始创建路径
  12.         context.arc(i*,i*,i*,,Math.PI*0.5,true);   //创建圆形路径（逆时针）
  13.         context.closePath();     //路径创建完毕，关闭路径
  14.         context.fillStyle="rgba(255,0,0,0.25)";   //设定圆形样式
  15.         context.fill();     //填充圆形
  16.     }
  17. }
  18. </script>

运行结果：

在chrome 34以及Opera 18版本以上的浏览器中，支持使用图形上下文对象的ellipse方法绘制椭圆。

context.ellipse(x,y,radiusX,radiusY,rotation,startAngle,endAngle,anticlockwise)

radiusX为椭圆横向半径，radiusY为纵向半径，rotation为逆时针旋转角度

三、不关闭路的结果

代码事例如下：

  1. <body onload="draw('canvas1')">
  2. <canvas id="canvas1" width="" height=""></canvas>
  3. <script type="text/javascript">
  4.     function draw(id){
  5.     var canvas=document.getElementById(id);
  6.     var context=canvas.getContext('2d');    //不可以设为3d、4d
  7.     context.fillStyle="#ddd";               //填充矩形
  8.     context.fillRect(,,,);       //绘制矩形
  9.     var n=;
  10.     for(var i=;i<;i++){
  11.         //context.beginPath();       //开始创建路径
  12.         context.arc(i*,i*,i*,,Math.PI*,true);   //绘制圆形路径
  13.         // context.closePath();     //关闭路径
  14.         context.fillStyle="rgba(255,0,0,0.25)";   //填充圆形
  15.         context.fill();
  16.     }
  17. }
  18. </script>

运行结果：

不关闭路径，创建第二个圆时，因为没有把第一个圆的路径关闭，所以第一个圆的路径保留着，绘制第二个圆时，第一个圆会根据该路径重复绘制，第二个圆只绘制一次，而第一个圆会绘制两次，依次类推......所以不关闭路径，已创建的路径会一直保留着。

四、绘制直线

moveTo方法：将光标移动到指定坐标点，绘制直线时以这个坐标为起点。该方法的定义：moveTo(x,y)

lineTo(x,y)方法：该方法是在moveTo方法中的指定的直线起点与参数中指定的直线终点之间绘制一条直线。该方法定义方法：lineTo(x,y)

在创建路径时，需要使用moveTo方法将光标移动到直线的起点位置，然后使用lineTo方法在直线起点与终点之间创建路径，然后将光标移动到直线的终点，在下一次s使用lineTo方法的时候，会以当前光标所在坐标点为直线起点，在下一个lineTo方法指定的直线终点之间创建路径，不断重复这个过程，来完成复杂图形的路径绘制。

canvas元素的更多相关文章

  1. 【高级功能】使用canvas元素（第一部分）

    1. 开始使用 canvas 元素 canvas 元素非常简单,这是指它所有的功能都体现在一个JavaScript对象上,因此该元素本身只有两个属性:width 和 height. canvas 元素 ...

  2. 使用canvas元素-art方法绘制圆弧

    最近在学习HTML5,发现canvas真的很棒,canvas元素是一种可供绘图的平面,我们用JavaScript对它进行配置和操作.我这里说一下arc方法绘制圆弧,顺便提一下涉及到的基础知识. 首先看 ...

  3. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

  4. 【温故而知新-Javascript】使用canvas元素（第二部分）

    本文将继续介绍canvas的功能,展示如何绘制更复杂的图形(包括圆弧和曲线),如何使用剪裁区域来限制操作以及如何绘制文本.还是介绍可以应用在画布上的特效和变换,包括阴影.透明度.旋转和坐标重映射. 1 ...

  5. 【温故而知新-Javascript】使用canvas元素（第一部分）

    1. 开始使用 canvas 元素 canvas 元素非常简单,这是指它所有的功能都体现在一个JavaScript对象上,因此该元素本身只有两个属性:width 和 height. canvas 元素 ...

  6. 【高级功能】使用canvas元素（第二部分）

    本文将继续介绍canvas的功能,展示如何绘制更复杂的图形(包括圆弧和曲线),如何使用剪裁区域来限制操作以及如何绘制文本.还是介绍可以应用在画布上的特效和变换,包括阴影.透明度.旋转和坐标重映射. 1 ...

  7. -_-#【Canvas】导出在<canvas>元素上绘制的图像

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. canvas元素大小与绘图表面大小

    原文链接:canvas总结:元素大小与绘图表面大小 前言 我们使用canvas的时候一般在canvas元素中直接设置它的width和height: 1 <canvas id="myCa ...

  9. HTML5图形绘制学习（1）-- Canvas 元素简介

    Canvas元素是HTML5中新增的一个专门用来进行图形绘制的元素.和其名称Canvas一样,它就相当于一个画布,我们可以在其上描绘各种图形. 这里所说的绘制图型,不是指我们可以进行可视化的图形绘制, ...

  10. windows phone (25) Canvas元素B

    原文:windows phone (25) Canvas元素B  ZIndex 这也是一个附加属性,表示canvas的children集合内的子元素的显示顺序,在canvas中的元素默认情况下是后面的 ...

随机推荐

  1. EBS接口表关系概览（部分）

    ItemTable Relationship TransactionTable Relationship PO/PRTable Relationships ReceivingTable Relatio ...

  2. How to migrate data from another Mac using Mountain Lion and earlier

    链接:http://support.apple.com/zh-cn/HT4889

  3. python使用h5py读取mat文件数据，并保存图像

    1 安装h5py sudo apt-get install libhdf5-dev sudo pip install h5py 假设你已经安装好python和numpy模块 2 读取mat文件数据 i ...

  4. 【项目管理】 项目管理术语总结 (PMP培训笔记)

    1. 项目管理简介 (1) 项目管理定义 项目管理定义 : 将 知识, 技能, 工具 与 技术 应用与项目活动, 以满足项目的要求; (2) 现代项目管理 现代项目管理与传统项目管理区别 : -- 传 ...

  5. 1021. Deepest Root (25) -并查集判树 -BFS求深度

    题目如下: A graph which is connected and acyclic can be considered a tree. The height of the tree depend ...

  6. React Native控件只TextInput

    TextInput是一个允许用户在应用中通过键盘输入文本的基本组件.本组件的属性提供了多种特性的配置,譬如自动完成.自动大小写.占位文字,以及多种不同的键盘类型(如纯数字键盘)等等. 比如官网最简单的 ...

  7. React 之props属性

    React 里有一个非常常用的模式就是对组件做一层抽象.组件对外公开一个简单的属性(Props)来实现功能,但内部细节可能有非常复杂的实现. 可以使用 JSX 展开属性 来合并现有的 props 和其 ...

  8. vim的modeline

    vim的modeline可以让你针对每个文件进行文件级别的设置,这些设置是覆盖当前用户的vimrc中的设置的.vim默认关闭modeline,开启的话需要在你的home下的.vimrc文件中增加一行: ...

  9. (NO.00001)iOS游戏SpeedBoy Lite成形记(十八)

    现在需要实现具体的游戏逻辑大致如下: 玩家点击某条赛道选择一个选手,然后会弹出菜单窗口让玩家输入压赌的金额,如果输入的金额值非法,则在GameInterface下部的状态栏中显示提示,要求玩家重新输入 ...

  10. 关于JavaScript中的几种匿名行数的写法

     匿名函数没有实际名字,也没有指针,怎么执行滴? 其实大家可以看看小括号的意义就应该可以理解.小括号有返回值,也就是小括号内的函数或者表达式的返回值,所以说小括号内的function返回值等于小括 ...