HTML5 Canvas入门

Canvas元素本身没有绘图能力，所有的绘图工作必须在JavaScript内部完成。拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

直接上代码。

绘制2d线条

先在html页面下添加Canvas元素。设定画布的id和宽高。

1	<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>

用JavaScript在画布上面绘制图像

		 //        获得画布
		 var c=document.getElementById("huabu");
		 //        创建基于所获得画布的2d画笔
		 var pan= c.getContext("2d");
		 pan.moveTo(10,10);//移动画笔
		 pan.lineTo(40,40);//从源点绘制到指定点（30,40）
pan.lineTo(50,100);//从源点绘制到指定点（50,100）
 pan.lineTo(150,20);
	 pan.stroke();//之前是在构建，这里是把构思正式画到画布上，一定要这一步

结果
注意
- 如果想绘制两条线，不能想当然的moveTo(),然后再lineTo()，应该再声明一支画笔
  1
  2
  3
  4
  5
  var pan2= c.getContext("2d");
  pan2.moveTo(40,10);
  pan2.lineTo(30,60);
  pan2.lineTo(188,170);
  pan2.stroke();
- 结果：（绘制两条线）

绘制圆形

先在html页面下添加Canvas元素。设定画布的id和宽高。

1	<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>

用JavaScript在画布上面绘制图像

  	//获得画布
var c=document.getElementById("huabu");
var pan= c.getContext("2d");
//设置图形填充的颜色
pan.fillStyle='#00f';
//开始绘制图形
pan.beginPath();
//arc是圆的英文前几个字母
//括号内指定（圆心x轴坐标、圆心y轴坐标、圆半径、开始角度、结束角度、顺时针(false)还是逆时针(true)）
pan.arc(100,100,50,0,Math.PI/2,true);
//结束绘图
pan.closePath();
pan.fill();//一定要有，将构建好的图形正式填充到画布上去

学习以下代码

获得2d画笔后，用beginPath()方法绘制新路径
用strokeStyle指定路径颜色
arc()设置圆的属性

stroke()绘制弧线

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas绘制弧线入门示例</title>
</head>
<body>

<!-- 添加canvas标签，并加上红色边框以便于在页面上查看 -->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的浏览器不支持canvas标签。
</canvas>

<script type="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){  
    //获取对应的CanvasRenderingContext2D对象(画笔)
    var ctx = canvas.getContext("2d");  
    
    //开始一个新的绘制路径
    ctx.beginPath();
    //设置弧线的颜色为蓝色
    ctx.strokeStyle = "blue";
    var circle = {
        x : 100,    //圆心的x轴坐标值
        y : 100,    //圆心的y轴坐标值
        r : 50      //圆的半径
    };
    //沿着坐标点(100,100)为圆心、半径为50px的圆的顺时针方向绘制弧线
    ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI / 2, false);    
    //按照指定的路径绘制弧线
    ctx.stroke();
}
</script>
</body>
</html>

给画布添加图像

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="image.png"

//drawImage(图像元素，左上角顶点x轴坐标，左上角顶点y轴坐标)
cxt.drawImage(img,0,0);

</script>