canvas绘图

canvas-1

引入：canvas标签

<canvas width="500px" height="500px"> </canvas>  <!--默认:宽300px 高150px 还可以自己指定宽高 一般在内部指定--> 
不支持canvas的浏览器会支持canvas标签里面的代码

• 注意：画布的大小一般在canvas标签内定义，如果在样式中定义（.c{定义画布的宽高…})
  这是因为样式的宽高不是改变canvas画布的大小，而是在画布原始的基础上等比例缩放(默认:宽300px 高150px)

//css代码
body{
	background: pink;
}
.c{
	background: white;
	width:300px; 
	height:150px;
}

//html js代码
<canvas class="c"></canvas>

	<script type="text/javascript">
		var con=document.getElementsByClassName('c')[0];
		var con1=con.getContext('2d');
		
		con1.strokeRect(0,0,100,100);
	</script>

按照上面的代码，在样式中定义宽高300px，150px，相当于和默认画布的比例相同，所以显示结果如下图：

绘制环境：
getContext(‘2d’); 目前支持2d的场景 得到绘图对象

<canvas class="c" width="500px;" height="500px;"></canvas>

	<script type="text/javascript">
		var con=document.getElementsByClassName('c')[0]; //定义一个画布
		var con1=con.getContext('2d'); //得到绘图对象con1
	</script>

绘制方块：

fillRect(L,T,W,H);  //默认颜色为黑色
strokeRect(L,T,W,H); //带边框的方块-默认边框为1px 黑色边框 
strokeRect(50,50,100,100);
（canvas绘图原理从距左边上边50px的位置处，由中间向两边分别分半个像素，因为像素是一格一格的，所以计算机自动将两边半个像素补全，所以边框就变成2px）

解决这个问题：
strokeRect(50.5,50.5,100,100);

设置绘图：

fillStyle： //填充颜色  限于fillRect()
lineWidth： //线宽度，是一个数值
strokeStyle：//边线颜色  限于strokeRect()
     //例1
        con1.fillStyle='red';
		con1.strokeStyle="blue";

        con1.lineWidth=10;
        con1.fillRect(50,50,100,100);
        con1.strokeRect(50.5,50.5,100,100); //绘制结果如下图：
     // 填充绘制边框顺序不一样结果也将不一样

边界的绘制：

lineJoin:边界链接点样式 (miter-默认 round-圆角 bevel-斜角)
lineCap：端点样式  (butt-默认 round-圆角 square-高出宽度一半的值)

//端点样式
 con1.lineCap='round';
        con1.lineWidth=20;
        con1.moveTo(100,100);
        con1.lineTo(200,200);
        con1.stroke();

绘制路径：

绘制直线
beginPath:开始绘制路径 (开始作画，针对不同的区域绘制,一般每次绘图开始时都要注明，分区域绘制)
closePath：结束绘制路径 (起点和终止点链接)
moveTo：移动到绘制的新目标点 (只是做标记点，要想实现想要的图形必须画线)
lineTo:新的目标点

stroke：画线，默认黑色
fill：填充，默认黑色
rect：矩形区域 (四个参数)
clearRect：删除一个画布的矩形区域 (四个参数 eg:con1.clearRect(0,0,con.width,con.height) 后面两个分别为convas画布的宽和高)
save：保存路径 //可以防止累加 ！！
restore：恢复路径

//代码块1
    con1.beginPath();  //开始作画
        con1.moveTo(100,100); //绘制的新起点
        con1.lineTo(200,200);
        con1.lineTo(300,200);
        con1.closePath();
        con1.stroke(); //绘线类型
  
//代码块2      
    con1.beginPath();
        con1.moveTo(100,200);
        con1.lineTo(200,300);
        con1.lineTo(300,300);
        con1.closePath();
        con1.fill();

注* 上述例子绘制两个三角形如[图1]，当去掉两个con1.beginPath();后绘制结果如 [图2]。
【图1】【图2】

//关于保存路径 恢复路径的例子
con1.save();
con1.fillStyle='red';  //将第一块三角形填充为红色
//代码块1
...
con1.restore();

如果不用此方法直接在代码块1上面添加 con1.fillStyle='red'; 会使得两块三角形的颜色都为红色

---

• 在练习之前，你可以先了解一下【client，offset，scroll 】
• 【鼠标位置确定 event.clientX…】

//offsetTop: 当前元素顶部距离最近父元素顶部的距离px

练习1.鼠标画线
<canvas class="c" width="500px;" height="500px;"></canvas>

	<script type="text/javascript">
		var con=document.getElementsByClassName('c')[0];
		var con1=con.getContext('2d');
		
		con.onmousedown=function(ev){
			var ev=ev||window.event;
			con1.moveTo(ev.clientX-con.offsetLeft,ev.clientY-con.offsetTop); 
            
            con.onmousemove=function(ev){
            	var ev=ev||ev.event;
            	con1.lineTo(ev.clientX-con.offsetLeft,ev.clientY-con.offsetTop);
            	con1.stroke();
            };
            con.onmouseup=function(){
            	con.onmousemove=null;
            	con.onmouseup=null;
            };
       };
	</script>

下图就是用上面做出的画板画出来的画：

---

canvas-2

绘制圆

arc（x，y，半径，起始弧度，结束弧度，旋转方向）

//x,y:起始位置
//弧度与角度的关系：弧度 = 角度*Math.PI/180  (Math.PI就是PI)
//旋转方向：顺时针(默认：false)，逆时针(ture)

//自制钟表

绘制其他曲线

arcTo(x1,y1,x1,y2,r)
//第一组坐标，第二组坐标，半径
//例1
        con1.moveTo(100,200);
		con1.arcTo(100,100,200,100,50);
		con1.stroke();
		
quadraticCurveTo(dx,dy,x1,x2);
//贝塞尔曲线：第一组控制点，第二组结束坐标

bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1);
//贝塞尔曲线：第一组控制点，第二组控制点，第三组结束坐标
//例2
        con1.moveTo(100,200);
		con1.bezierCurveTo(200,200,100,100,200,100);
        con1.stroke();
        

【例1图】
【例1：思路】 依据坐标确立两条边，做一个半径为r的圆，该圆与两条边相切从起始点开始到切点结束的线为所画线。
【例2图】
【例2：思路】

变换

translate(x,y) //偏移：从起始点为基准点，移动当前坐标位置
rotate(度数*Math.PI/180)  //旋转：参数为弧度 以左上角为中心点旋转
scale(宽缩放比例，高缩放比例)  //将图形等比例缩放