canvas
<canvas>
元素不是非常难但你需要一些基本的HTML和JavaScript知识。<canvas>
元素不被一些老的浏览器所支持,但是所有的主流浏览器的新近版本都支持。Canvas 的默认大小为300像素×150像素(宽×高,像素的单位是px)。但是,可以使用HTML的高度和宽度属性来自定义Canvas 的尺寸。为了在 Canvas 上绘制图形,我们使用一个JavaScript上下文对象,它能动态创建图像( creates graphics on the fly)。- canvas的默认宽高为:300x150
- canvas在设置宽高时不能够使用css来设置宽高,如果使用css来设置宽高,那么图像会缩放,不会变大
- 如果浏览器不支持canvas,会显示canvas标签之间的内容
- 得到上下文对象时,一般我们传入的是“2d”,2d指的是可以绘制平面图形,如果在绘制3d图形,传入“webgl”
- 通过getContext方法得到一个CanvasRenderingContext2D对象,这个对象就是操作canvas的一个上下文对象(工具集)。
- 如果给canvas在js代码中重新设置宽高,将来canvas中的内容会被清空
- getContext("2d"):得到上下文对象
- moveTo():将画笔移动到某一点
- lineTo():确定要连接的另一点
- stroke():将以上所有的路径连接起来
- fill():将以上所有的路径组成的图形填充起来
<canvas id="cas"> 如果浏览器不支持canvas,会显示这段内容 </canvas> <script> //1.0得到canvas对象 var cas = document.getElementById("cas"); //1.1给画布设置宽高: cas.width = 600; cas.height = 300; //2.0得到绘制上下文对象 var ctx = cas.getContext("2d"); //3.0将点移动到100,100位置 ctx.moveTo(100,100);//将画笔移动到100,100的位置 //4.0将线的终点也标记出来 ctx.lineTo(200,100);//标记另一点200,100并且记录,将来以上两点要用线连接起来 //5.0将所有的描点链接起来 ctx.stroke(); </script>
非零环绕原则:
- closePath:将所有的路径闭合起来
- setLineDash():用来设置虚线(它里面要传入一个参数,参数的类型是数组)
- getLineDash():得到传入的虚线数组
<canvas id="cas"></canvas> <script> //1.0得到canvas对象 var cas = document.getElementById("cas"); //2.0设置宽高 cas.width = 600; cas.height = 600; //3.0得到上下文对象 var ctx = cas.getContext("2d"); ctx.moveTo(100,100); ctx.lineTo(500,100); ctx.lineTo(500,500); ctx.lineTo(100,500); ctx.closePath(); ctx.moveTo(250,250); ctx.lineTo(250,350); ctx.lineTo(350,350); ctx.lineTo(350,250); ctx.closePath(); ctx.stroke(); ctx.fill(); </script>
- lineWidth:设置路径的宽度
- lineDashOffset:设置虚线的偏移距离
- strokeStyle:设置线段描 边的颜色
- fillStyle: 设置路径所围区域的颜色
<canvas id="cas"></canvas> <script> //1.0得到canvas对象 var cas = document.getElementById("cas"); //2.0设置宽高 cas.width = 600; cas.height = 300; //3.0得到上下文对象 var ctx = cas.getContext("2d"); ctx.moveTo(250,100); ctx.lineTo(350,100); ctx.lineTo(350,200); ctx.lineTo(250,200); ctx.closePath(); ctx.lineWidth = 20; // ctx.strokeStyle = "red"; // ctx.strokeStyle = "#0f0"; ctx.strokeStyle = "rgb(0,0,255)"; ctx.fillStyle = "pink"; ctx.stroke(); ctx.fill(); </script>
- 绘制一个折线图
<canvas id="cas"></canvas> <script> //1.0得到canvas对象 var cas = document.getElementById("cas"); //2.0设置宽高 cas.width = 600; cas.height = 600; //3.0得到上下文对象 var ctx = cas.getContext("2d"); //4.0绘制坐标系 var paddingTop; var paddingBottom; var paddingRight; var paddingLeft; var arrW = 10; var arrH = 26; paddingTop = paddingBottom = paddingRight = paddingLeft = 30; var x0 = paddingLeft; var y0 = cas.height - paddingBottom; //4.1绘制轴线 ctx.beginPath(); ctx.moveTo(x0,paddingTop); ctx.lineTo(x0,y0); ctx.lineTo(cas.width - paddingRight,y0); ctx.stroke(); //4.2绘制箭头 ctx.beginPath(); ctx.moveTo(x0,paddingTop); ctx.lineTo(x0 - arrW / 2 , paddingTop + arrH); ctx.lineTo(x0 , paddingTop + arrH / 2); ctx.lineTo(x0 + arrW / 2 , paddingTop + arrH); ctx.closePath(); ctx.moveTo(cas.width - paddingRight,y0); ctx.lineTo(cas.width - paddingRight - arrH , y0 - arrW / 2); ctx.lineTo(cas.width - paddingRight - arrH / 2 , y0); ctx.lineTo(cas.width - paddingRight - arrH , y0 + arrW / 2); ctx.closePath(); ctx.fill(); //4.3绘制坐标上的小点: var l = 8; var points = [[10,10],[15,30],[30,5],[50,8],[55,40]];//二维数组。 for(var i = 0 ; i < points.length ; i ++ ) { //取出对应点的x,y var pX = points[i][0]; var pY = points[i][1]; //将圆点由自己的圆点切换成画布的左上角 pX = x0 + points[i][0]; pY = y0 - points[i][1]; //根据x,y绘制小点(绘制一个矩形) ctx.beginPath(); ctx.lineWidth = 4; ctx.moveTo(pX - l / 2,pY - l / 2); ctx.lineTo(pX + l / 2,pY - l / 2); ctx.lineTo(pX + l / 2,pY + l / 2); ctx.lineTo(pX - l / 2,pY + l / 2); ctx.closePath(); ctx.stroke(); } </script>
- 绘制矩形:
<canvas id="cas"></canvas>
<script>
//1.0得到canvas对象
var cas = document.getElementById("cas");
//2.0设置宽高
cas.width = 600;
cas.height = 600;
//3.0得到上下文对象
var ctx = cas.getContext("2d");
//4.0直接使用canvas中的方法来绘制矩形:(100,100),200,100
ctx.rect(100,100,200,100);
// ctx.stroke();
ctx.fill();
ctx.strokeRect(100,250,200,100);
ctx.fillRect(100,400,200,100);
//清除一个矩形区域:
ctx.clearRect(120,120,50,50);
ctx.clearRect(200,150,80,300);
ctx.clearRect(0,0,cas.width,cas.height);
// cas.width = width;
// cas.height = height;
</script>
<canvas id="cas"></canvas>
<script>
//1.0得到canvas对象
var cas = document.getElementById("cas");
//2.0设置宽高
cas.width = 600;
cas.height = 600;
//3.0得到上下文对象
var ctx = cas.getContext("2d");
//4.0绘制一个圆
ctx.arc(300, 300, 100, 0, 2 * Math.PI);
ctx.stroke();
</script>
<canvas id="cas"></canvas>
<script>
//1.0得到canvas对象
var cas = document.getElementById("cas");
//2.0设置宽高
cas.width = 600;
cas.height = 600;
//3.0得到上下文对象
var ctx = cas.getContext("2d");
//4.0使用arc方法来绘制一个圆形
// ctx.arc(300,300,100,0,2*Math.PI);
// ctx.stroke();
//角度转弧度:
function toRadian( angle) {
return angle * Math.PI / 180;
}
//弧度转角度:
function toAngle (radian) {
return radian * 180 / Math.PI;
}
//4.1绘制一个圆弧
ctx.moveTo(300,300);
ctx.arc(300,300,100,0, toRadian(90));
ctx.closePath();
ctx.stroke();
</script>
<canvas id="cas"></canvas>
<script>
//1.0得到canvas对象
var cas = document.getElementById("cas");
//2.0设置宽高
cas.width = 600;
cas.height = 300;
//3.0得到上下文对象
var ctx = cas.getContext("2d");
//4.0绘制一段与线段相切的圆弧
var r = 50;
ctx.moveTo(20,20);
ctx.arcTo(170,20,170,70,r);
ctx.lineTo(170,170);
ctx.stroke();
</script>
圆角矩形
<canvas id="cas"></canvas>
<script>
//1.0得到canvas对象
var cas = document.getElementById("cas");
//2.0设置宽高
cas.width = 600;
cas.height = 300;
//3.0得到上下文对象
var ctx = cas.getContext("2d");
//4.0绘制四条不相交的线段
ctx.moveTo(100,100);
ctx.lineTo(300,100);
ctx.arcTo(90,100,90,110,10);
ctx.moveTo(310,110);
ctx.lineTo(310,210);
// ctx.arcTo(310,100,310,110,10);
ctx.arcTo(310,100,300,100,10);
ctx.moveTo(300,220);
ctx.lineTo(100,220);
ctx.arcTo(310,220,310,210,10);
ctx.moveTo(90,210);
ctx.lineTo(90,110);
ctx.arcTo(90,220,100,220,10);
ctx.stroke();
</script>
4.绘制文本
<canvas id="cas"></canvas>
<script>
//1.0得到canvas对象
var cas = document.getElementById("cas");
//2.0设置宽高
cas.width = 600;
cas.height = 300;
//3.0得到上下文对象
var ctx = cas.getContext("2d");
//4.0在canvas中绘制Hello Wrold
var str = "Hello World";
var x = 100;
var y = 100;
ctx.font = "30px '楷体'";
ctx.strokeText(str,x,y);
ctx.arc(x,y,2,0,2*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.fillText(str,x,y + 100);
ctx.arc(x,y + 100,2,0,2*Math.PI);
ctx.stroke();
</script>
canvasRenderingContext2D.fillText(text, x, y);
<canvas id="cas"></canvas>
<script>
//1.0得到canvas对象
var cas = document.getElementById("cas");
//2.0设置宽高
cas.width = 600;
cas.height = 600;
//3.0得到上下文对象
var ctx = cas.getContext("2d");
//4.0在canvas中绘制Hello Wrold
var str = "Hello World";
var x = 300;
var y = 100;
ctx.font = "18px '楷体'";
//设置文本水平方向上的位置:textAlign
// ctx.strokeText(str,x,y);
// ctx.moveTo(x,0);
// ctx.lineTo(x,300);
// ctx.stroke();
// ctx.beginPath();
// ctx.textAlign = "right";
// ctx.strokeText(str,x,y+50);
// ctx.beginPath();
// ctx.textAlign = "center";
// ctx.strokeText(str,x,y+100);
//设置文本垂直方向上的位置:textBaseline
// ctx.beginPath();
// ctx.moveTo(0,300);
// ctx.lineTo(600,300);
// ctx.stroke();
// ctx.fillText(str, 0 ,300);
// //top, middle, bottom
// ctx.beginPath();
// ctx.textBaseline = "top";
// ctx.fillText(str, 150,300)
// ctx.beginPath();
// ctx.textBaseline = "middle";
// ctx.fillText(str, 300,300)
ctx.beginPath();
ctx.textBaseline = "bottom";
ctx.fillText(str, 450,300)
//得到文本的宽度:
var size = ctx.measureText(str);
alert(size.width)
</script>
5. 绘制图形
如果要绘制图片,必须先得到一张图片,得到图片的方式有两种:
第一种:直接从dom元素中取
第二种:使用new关键字new出来
CanvasRenderingContext2D.drawImage( img, dx, dy )
作用:在canvas中绘制一张图片
参数:
img:要绘制的图片对象
dx,dy:图片在canvas中的绘制位置
CanvasRenderingContext2D.drawImage( img, dx, dy , dWidth, dHeight )
<canvas id="cas"></canvas>
<!-- <img src="imgs/1.jpg" alt="" id="img"> -->
<script>
//1.0得到canvas对象
var cas = document.getElementById("cas");
//2.0设置宽高
cas.width = 600;
cas.height = 600;
//3.0得到上下文对象
var ctx = cas.getContext("2d");
//4.0绘制一张图片
//4.1得到图片对象的第一种方式
// var img = document.getElementById("img");
// //如果要绘制这张图片必须保证图片已经被正常加载出来了
// img.onload = function(){
// //4.2使用drawImage方法绘制图片
// ctx.drawImage(img, 100, 100);
// }
//4.2得到图片对象的第二种方式
var img = new Image();//创建一个图片对象
img.src = "imgs/1.jpg";//给对象添加一个路径属性,将来这张图片就是这个路径下面的图片
img.onload = function(){
ctx.drawImage(img,200,200);
}
</script>
作用:在canvas中绘制一张图片
参数:
img:要绘制的图片对象
dx,dy:图片在canvas中的绘制位置
dWidth, dHeight:给绘制图片设置宽高
CanvasRenderingContext2D.drawImage( img, sx, sy, sWidth, sHeight, dx, dy , dWidth, dHeight )
canvas id="cas"></canvas>
<script>
//1.0得到canvas对象
var cas = document.getElementById("cas");
//2.0设置宽高
cas.width = 600;
cas.height = 600;
//3.0得到上下文对象
var ctx = cas.getContext("2d");
//4.0得到图片对象
var img = new Image();
img.src = "imgs/2.jpg";
img.onload = function(){
ctx.drawImage(img,0,0,600, 600 * this.height / this.width);
}
</script>
作用:在canvas中绘制一张图片
参数:
img:要绘制的图片对象
sx,sy:从要绘制图片中裁剪的图片起始坐标
sWidth,sHeight:从要绘制的图片中裁剪的图片宽高
dx,dy:图片在canvas中的绘制位置
dWidth, dHeight:给绘制图片设置宽高
<canvas id="cas"></canvas>
<script>
//1.0得到canvas对象
var cas = document.getElementById("cas");
//2.0设置宽高
cas.width = 600;
cas.height = 600;
//3.0得到上下文对象
var ctx = cas.getContext("2d");
//4.0得到一个图片对象
var img = new Image();
img.src = "imgs/2.jpg";
img.onload = function(){
// ctx.drawImage( img, 719, 264, 43, 75, 100, 100, 200, 200 * 75 / 43);
ctx.drawImage(img, 719 , 264, 43, 75, 100, 100, 43, 75);
}
</script>
6. 变换
在canvas中如果要绘制图形,坐标系起着至关重要的作用。在canvas中为了能够绘制出更多图形来,canvas为我们准备一系列的变换方法。
作用:可以使用变换帮助我绘制更多类型的图形。
translate(); 平移变换
scale(); 伸缩变换
rotate(); 旋转变换
变换以后的坐标系会影响后面结构
<canvas id="cas"></canvas>
<script>
//角度转弧度:
function toRadian(angle) {
return angle * Math.PI / 180;
}
//弧度转角度
function toAngle (radian) {
return radian * 180 / Math.PI;
}
//1.0得到canvas对象
var cas = document.getElementById("cas");
//2.0设置宽高
cas.width = 600;
cas.height = 300;
//3.0得到上下文对象
var ctx = cas.getContext("2d");
//4.0在canvas中心绘制一个矩形
//4.1将坐标平移到画布中心位置
ctx.translate( cas.width / 2, cas.height / 2);
//4.2绘制矩形
var l = 100;
var x = -l / 2;
var y = -l / 2;
var angle = 2;
var speed = 1000;
setInterval(function() {
//先清除画布内容
ctx.clearRect( -cas.width / 2, -cas.height / 2, cas.width, cas.height);
//旋转
ctx.rotate(toRadian(angle));
//绘制矩形
ctx.strokeRect( x, y, l, l);
// angle ++;
}, 1000 / speed);
</script>
7. 状态的保存和恢复
在canvas中所有的状态属性都会一直保存下去,影响下面代码的样式,所以为了 解决这个问题,我们可以进行状态的保存的恢复。
save(); //将之前的状态保存起来
restore(); //将上一次保存的状态恢复过来
<canvas id="cas"></canvas>
<script>
//1.0得到canvas对象
var cas = document.getElementById("cas");
//2.0设置宽高
cas.width = 600;
cas.height = 300;
//3.0得到上下文对象
var ctx = cas.getContext("2d");
//当代码运行到这里的时候,我们的canvas中属性的状态,全部是默认的
//我希望在这里把所有的默认状态全部保存起来
ctx.save();
//4.0绘制一个矩形(描边红色,填充绿色,线宽10)
ctx.beginPath();
ctx.fillStyle = "red";
ctx.strokeStyle = "blue";
ctx.lineWidth = 10;
ctx.rect(100,100,100,100);
ctx.stroke();
ctx.fill();
//当代码运行到这里的时候,我们的canvas中属性的状态被修改了
//我们希望在这里把之保存的状态恢复过来
ctx.restore();
//5.0绘制第二个矩形(所有样式我都希望是默认的)
ctx.beginPath();
ctx.rect(300,100,100,100);
ctx.stroke();
ctx.fill();
</script>