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(宽缩放比例,高缩放比例) //将图形等比例缩放