关键字：canvas 绘制 线 矩形 文字 圆形 曲线 图片 画布 变形 阴影
简介
IE8以下不支持
HTML5新标签 使用JS API
canvas不适用CSS设置样式，使用自身的width和height属性设置
作用
- 绘制线
- 绘制三角形
- 绘制矩形
- 绘制文字
- 绘制圆形
- 绘制图片
- 绘制视频
- 绘制图片阴影
<canvas id="canvas" width="500" height="500">
您的浏览器不支持canvas，请升级至最新版
</canvas>
常用方法
获取元素
大多数时候都在操作ctx对象
var canvas=document.getElementById("canvas");
获取上下文对象（画笔）
var ctx=canvas.getContext("2d");
暂时不涉及3d
绘制线
- 1、开始绘制
- 2、绘制起点
- 3、绘制后续的点
- 4、绘制结束
-
closePath()也叫关闭路径，会把终点和起点连接起来进行绘制 - 当需要终点和起点连接，才使用
closePath()
-
- 5、画（填）
- 设置画线颜色
- 设置画线的宽度
- 画线
- 设置填充颜色
- 填充
- 绘制的线和填充的内容会发生覆盖的情况，没有优先级，由代码顺序决定（后面设置的会覆盖前面设置的）
//1、开始绘制
ctx.beginPath();
//2、绘制起点
ctx.moveTo(250,250);
//3、绘制后续的点
ctx.lineTo(500,0);
ctx.lineTo(450,450);
//4、绘制结束
//closePath()也叫关闭路径，会把终点和起点连接起来进行绘制
//当需要终点和起点连接，才使用closePath()
ctx.closePath();
//5、画（填）
//设置画线颜色
ctx.strokeStyle="red";
//设置画线的宽度
ctx.lineWidth=5;
//画线
ctx.stroke();
//设置填充颜色
ctx.fillStyle="blue";
//填充
ctx.fill();
//绘制的线和填充的内容会发生覆盖的情况，没有优先级，由代码顺序决定（后面设置的会覆盖前面设置的）
绘制矩形
按照矩形画线
ctx.strokeRect(x,y,w,h);
按照矩形填充ctx.fillRect(x,y,w,h);
//按照矩形画线
ctx.strokeRect(0,0,100,100);
//按照矩形填充
ctx.fillRect(0,100,100,100);
绘制文字
- 参数4:最大宽度，可写可不写
描边文字
ctx.strokeText(text,x,y,maxwidth?);
填充文字ctx.fillText(text,x,y,maxwidth?);
ctx.font="50px 黑体"；
ctx.strokeText("hello world",100,100);
ctx.fillText("hello world",100,100);
绘制圆形
ctx.arc(x,y,r,startAngle,endAngle,direction)
- 参数1:圆心的x
- 参数2:圆心的y
- 参数3:圆的半径
- 参数4:起点的位置，根据右侧和设置的弧度制找到起点
- 参数5:终点的位置，根据右侧和设置的弧度制找到终点
- 参数6:绘制的方向，true表示逆时针，false表示顺时针
ctx.arc(250, 250, 200, Math.PI, Math.PI / 2, true);
ctx.stroke();
绘制曲线
- 使用
moveTo设置起点 - 使用
quadraticCurveTo()放置基准点和终点
二次贝塞尔曲线
- 参数1:基准点的x
- 参数2:基准点的y
- 参数3:终点的x
- 参数4:终点的y
ctx.moveTo(0, 0)
ctx.quadraticCurveTo(250, 500, 500, 0);
ctx.stroke();
ctx.moveTo(0, 0);
ctx.quadraticCurveTo(500, 250, 0, 500);
ctx.stroke();
ctx.moveTo(0, 500);
ctx.quadraticCurveTo(250, 0, 500, 500);
ctx.stroke();
ctx.moveTo(500,0);
ctx.quadraticCurveTo(0, 250, 500, 500);
ctx.stroke();
三次贝塞尔曲线的特点是有两个基准点
- 参数1:基准点1的x
- 参数2:基准点1的y
- 参数3:基准点2的x
- 参数4:基准点2的y
- 参数5:终点的x
- 参数6:终点的y
ctx.moveTo(0, 0);
ctx.bezierCurveTo(500, 0, 0, 500, 500, 500);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.bezierCurveTo(0, 500, 500, 0, 500, 500);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(500, 0);
ctx.bezierCurveTo(0, 0, 500, 500, 0, 500);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(500, 0);
ctx.bezierCurveTo(500, 500, 0, 0, 0, 500);
ctx.stroke();
绘制图片
- 如果想把图像画到
canvas中，需要先创建image对象
var img = new Image();
img.src = './imgs/img.png';
img.onload = function () {
// 必须等图片加载完成之后，才可以进行绘制
ctx.drawImage(img, 100, 100);
// ctx.drawImage(img, 100, 100, 200, 200);
// ctx.drawImage(img, 100, 100, 260, 260, 100, 96, 260, 260);
// 清除画布
ctx.clearRect(250, 250, 200, 200);
// 四个参数： x, y, w, h
// 用户清除画布中已有的内容
};
变形
注意：改变不了坐标系
不会影响已经绘制的内容
- 位移
ctx.translate(x,y); - 缩放
ctx.scale(scaleX,scaleY) - 旋转、弧度
ctx.rotate();
代码练习
ctx.translate(100, 100);
ctx.scale(2, 2);
ctx.rotate(Math.PI / 8);
ctx.fillRect(100, 100, 300, 100);
ctx.rotate(Math.PI / 2);
ctx.translate(200, 100);
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 300, 100);
代码示例
// 绘制表盘
ctx.translate(250, 250);
for (var i = 0; i < 12; i++) {
ctx.rotate(Math.PI / 6);
ctx.beginPath();
ctx.moveTo(0, -200);
ctx.lineTo(0, -150);
ctx.closePath();
ctx.lineWidth = 10;
ctx.stroke();
//因为表盘上所有的刻度都是围绕中心展开的，所以，先把坐标系原点 平移 到canvas中心的位置，然后在使用 负的y值 进行绘制，每次绘制前，进行30度的旋转即可，持续12次。 第一个绘制的并非是12刻度，而是刻度1
}
判断是否点中
-
var res=ctx.isPointInPath(x,y);- 判断是否点了某个区域
- 注意点：如果进行了描边，点击内部也会触发
-
var res=ctx.isPointInStroke(x,y);- 判断是否点中了边框
常用属性
颜色、线
- 设置颜色
ctx.strokeStyle = 'red'; - 设置线的宽度
ctx.lineWidth = 50; - 设置线的头部和尾部进行圆角处理
ctx.lineCap = 'round'; - 设置线的交互处进行圆角处理
ctx.lineJoin = 'round';
ctx.strokeStyle = 'red';
ctx.lineWidth = 50;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.stroke();
文字
- 设置文字字体
ctx.font = '50px 黑体';
注意：单独设置字体大小不起作用，需要同时设置字体
- 设置水平对齐方式
ctx.textAlign = 'left';- textAlign的参数
start|left/center/end|right
- textAlign的参数
- 设置垂直对齐方式
ctx.textBaseline = 'middle';- textBaseline的参数
top/middle/bottom
- textBaseline的参数
ctx.font = '50px 黑体';
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
ctx.fillText('l j k m n p q', 100, 100);
ctx.strokeRect(100, 100, 300, 100);
阴影
- 设置阴影颜色
ctx.shadowColor = 'blue'; - 设置阴影X轴偏移量
ctx.shadowOffsetX = 10; - 设置阴影Y轴偏移量
ctx.shadowOffsetY = 10; - 设置阴影模糊程度
ctx.shadowBlur = 10;
代码示例
ctx.shadowColor = 'blue';
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 10;
ctx.fillRect(250, 250, 200, 200);
动画
动画的原理：擦出-绘制-擦出-绘制-擦出-绘制-擦出-绘制
- 使用
setInterval();切换选项卡的时候 - 使用
setTimeout();实现setInterval(); -
requestAnimationFrame();帧动画
学习应用——躁动的小球
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>躁动的小球</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="300">
<p>您的浏览器不支持canvas，请<a href="#">点击</a>下载最新版浏览器</p>
</canvas>
</body>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
var canvasWidth=canvas.width;
var canvasHeight=canvas.height;
function random(min,max){
return parseInt(Math.random()*(max-min+1)+min);
}
function randomColor(){
var r=random(0,255);
var g=random(0,255);
var b=random(0,255);
var a=Math.random(0,1)+0.3;
return "rgba("+r+","+g+","+b+","+a+")";
}
var balls=[];
for (var i=0;i<500;i++) {
var ball={};
ball.r=random(10,30);
ball.x=random(ball.r,canvasWidth-ball.r);
ball.y=random(ball.r,canvasHeight-ball.r);
ball.color=randomColor();
ball.speedX=random(1,5);
ball.speedY=random(1,5);
balls.push(ball);
}
setInterval(function(){
ctx.clearRect(0,0,canvasWidth,canvasHeight);
for (var i=0;i<balls.length;i++) {
var ball=balls[i];
ball.x+=ball.speedX;
ball.y+=ball.speedY;
if (ball.x>=canvasWidth-ball.r||ball.x<=ball.r) {
ball.speedX*=-1;
}
if (ball.y>=canvasHeight-ball.r||ball.y<=ball.r) {
ball.speedY*=-1;
}
ctx.beginPath();
ctx.arc(ball.x,ball.y,ball.r,0,Math.PI*2,false);
ctx.closePath();
ctx.fillStyle=ball.color;
ctx.fill();
}
},20)
</script>
</html>
