canvas画布的基本教程

基本用法

<canvas></canvas>
属于html元素，H5新增元素，需要结合js，用来绘制图形
在页面上放置一个canvas元素，就相当于放置了一块画布
可以绘制路径，矩形，圆形，字符，图像…
属性：
width 默认值300px
height 默认值150px
一般不建议使用css设置它的宽高
方法：

<canvas id="canvas" width="300" height="300"></canvas>

<script>//js部分
	var canvas=document.getElementById("canvas");
	if (canvas.getContext){		//监测浏览器是否支持canvas
		var ctx=canvas.getContext('2d');
		...
	}
</script>

绘制形状

绘制矩形
fillRect(x,y,width,height) 绘制一个填充的矩形
strokeRect(x,y,width,height) 绘制一个矩形边框
clearRect(x,y,width,height) 清除指定矩形区域，让清除部分完全透明

//js部分
var canvas=document.getElementById("canvas");
if(canvas.getContext){
	var ctx=canvas.getContext('2d');
	ctx.fillStyle='green';
	ctx.fillRect(10,10,20,20);
	
	ctx.fillStyle='rgba(200,0,0,0.5)';
    ctx.strokeRect(10,100,50,50);
    
    ctx.clearRect(20,20,30,30);
}

绘制路径
步骤：
1.创建路径起始点
2.使用画图命令去画出路径
3.路径封闭
4.一旦路径生成，就能通过描边或填充路径区域来渲染图形
方法：
beginPath()
新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径，通常使用moveTo设置起始位置
closePath()
闭合路径，如果绘制的路径自己就是闭合的，就不需要调用这个方法
fill()
通过填充路径的内容区域生成实心的图形，可以不用closePath
stroke()
通过线条绘制图形轮廓，需要使用closePath
moveTo(x, y)
将笔触移动到指定的坐标x以及y上
lineTo(x, y)
绘制一条从当前位置到指定x以及y位置的直线
实例1：绘制一个三角形

//js部分
var canvas = document.getElementById('canvas');
    if (canvas.getContext) {
    	var ctx = canvas.getContext('2d');
    	ctx.beginPath();
    	ctx.moveTo(100, 100);
    	ctx.lineTo(200, 50);
    	ctx.lineTo(200, 150);
    	ctx.fill(); //实心三角
    	//空心三角
    	//ctx.closePath(); 
    	//ctx.stroke();
    }

实例2：绘制一个五角星

//js部分
var canvas=document.getElementById("canvas");
    if(canvas.getContext){
        var ctx=canvas.getContext('2d');
        ctx.fillStyle='red';
        //ctx.strokeStyle='red';
        ctx.beginPath();
        ctx.moveTo(0,75);
        ctx.lineTo(75,75);
        ctx.lineTo(100,0);
        ctx.lineTo(125,75);
        ctx.lineTo(200,75);
        ctx.lineTo(135,125);
        ctx.lineTo(170,200);
        ctx.lineTo(100,150);
        ctx.lineTo(30,200);
        ctx.lineTo(60,125);
        ctx.fill();
        //空心五角星
        //ctx.closePath();
        //ctx.stroke();
    }

圆弧
arc(x, y, radius, startAngle, endAngle, anticlockwise)
x,y圆心坐标；radius半径；startAngle, endAngle开始和结束弧度；anticlockwise方向，默认不写是顺时针，设置成true为逆时针
实例1：画笑脸

<script>
    var canvas=document.getElementById("canvas");
    if(canvas.getContext){
        var ctx=canvas.getContext('2d');
        ctx.beginPath();
        ctx.arc(100,100,80,0,Math.PI * 2); //脸
        ctx.moveTo(160,100);
        ctx.arc(100,100,60,0,Math.PI); //口
        ctx.moveTo(80,80);
        ctx.arc(70,80,10,0,Math.PI * 2); //左眼
        ctx.moveTo(140,80);
        ctx.arc(130,80,10,0,Math.PI * 2); //右眼
        ctx.stroke();
    }
</script>

实例2：奥运五环

<script>
    var canvas=document.getElementById("canvas");
    if(canvas.getContext){
        var ctx=canvas.getContext('2d');
        ctx.lineWidth=5;
        ctx.beginPath();
        ctx.strokeStyle='blue';
        ctx.arc(80,80,60,0,Math.PI * 2);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.strokeStyle='black';
        ctx.arc(210,80,60,0,Math.PI * 2);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.strokeStyle='red';
        ctx.arc(340,80,60,0,Math.PI * 2);
        ctx.stroke();

        ctx.beginPath();
        ctx.strokeStyle='yellow';
        ctx.arc(145,140,60,0,Math.PI * 2);
        ctx.stroke();

        ctx.beginPath();
        ctx.strokeStyle='green';
        ctx.arc(275,140,60,0,Math.PI * 2);
        ctx.stroke();
    }
</script>

添加样式和颜色

颜色
fillStyle =color 设置图形的填充颜色
strokeStyle = color 设置图形轮廓的颜色
color 可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象

//橙色的几种表达
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

线型样式
lineWidth = value 设置线条宽度

ctx.lineWidth=6;