canvas的简单使用
一、什么是canvas？
1、是页面中一个无色透明的区域
2、HTML5的canvas元素使用JavaScript在网页上绘制图像
3、画布是一个矩形区域，可以控制其每一个像素
4、canvas拥有多种绘制矩形、路径、圆形、字符以及添加图像的方法
二、使用
下面是绘制一个正方形：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<canvas id="box" width="500" height="500"></canvas>
</body>
</html>
<script>
let c=document.getElementById("box");
let gcx=c.getContext("2d");
/*//绘制三角形
// 开始
gcx.beginPath();
// 设置开始点
gcx.moveTo(250,10);
// 设置三角形的经过点
gcx.lineTo(10,200);
gcx.lineTo(490,10);
gcx.lineTo(250,10);
// 设置直线的样子与颜色
gcx.strokeStyle="block";
gcx.lineWidth=5;
// 设置填充颜色
gcx.fillStyle="pink";
// 开始填充
gcx.fill();
// 直线
gcx.stroke();
// jie束
gcx.closePath();
*/
/*
//绘制矩形
gcx.beginPath();
// gcx.rect(X,Y,宽,高);
// gcx.rect(10,10,400,100);
// gcx.strokeStyle="red";
// gcx.lineWidth=5;
// gcx.fillStyle="yellow";
// gcx.fill();
// gcx.stroke();
// 绘制一个只有填充的矩形
gcx.fillStyle="pink";
gcx.fillRect(10,10,300,300);
gcx.closePath();
*/
/*
//绘制圆形
gcx.beginPath();
// gcx.arc(圆心坐标X轴,圆心坐标Y轴,圆形的半径,开始的角度,结束的角度,划线的方式（true逆时针，false顺时针）);
gcx.arc(250,250,200,0,Math.PI/180*90,true);
gcx.stroke();
gcx.closePath();
*/
//元素的移动
gcx.save();
gcx.beginPath();
gcx.strokeStyle="red";
gcx.lineWidth=10;
// // 移动
gcx.translate(100,0);
// 设置长方形gcx.strokeRect(X轴坐标,Y轴坐标,宽的长度,高的长度);
gcx.strokeRect(10,10,200,200);
gcx.closePath();
gcx.restore();//把坐标复原
</script>
1、创建canvas元素
<canvas id="XXX"></canvas>
canvas元素属性：id、width、height
2、使用JavaScript操作canvas
var c= document.getElementById("clock");
//这个是画笔
var cxt = c.getContext("2d");//这个是只有2d
三、绘制一条直线
1、 绘制一条直线(X轴向下是正的，Y轴向右是正的)
1）cxt.moveTo（x,y） 直线的起点
2）cxt.lineTo（x,y） 直线的终点
3）cxt.stroke() 将边框绘制到canvas上
注：画布的起点在左上角。
2、绘制直线的样式
颜色可以是：颜色名称、十六进制、rgb()、rgba()
1）cxt.strokeStyle = “red” 设置线条的颜色值
2）cxt.lineWidth= “5” 设置线条的粗细
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="straightLine" height="400" width="400"></canvas>
</body>
</html>
<script>
let line = document.getElementById("straightLine");
let straight = line.getContext("2d");
// 设置直线
straight.moveTo(0,0);
straight.lineTo(100,100);
// 绘制直线颜色和粗细
straight.strokeStyle = "red";
straight.lineWidth = 10;
straight.stroke();
</script>
四、绘制三角形
1、开始填充三角形
1）cxt.fillStyle =“rgba(255,0,0,0.4)”; 填充颜色
2）cxt.fill(); 填充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<p>绘制三角形</p>
<canvas id="box" width="500" height="500"></canvas>
</body>
</html>
<script>
let c = document.getElementById("box");
let gcx = c.getContext("2d");
// 开始
gcx.beginPath();
// 设置开始点
gcx.moveTo(250, 10);
// 设置三角形的经过点
gcx.lineTo(10, 200);
gcx.lineTo(490, 10);
gcx.lineTo(250, 10);//这个 是回到起始点
// 设置直线的样子与颜色
gcx.strokeStyle = "block";
gcx.lineWidth = 5;
// 设置填充颜色
gcx.fillStyle = "pink";
// 开始填充
gcx.fill();
// 直线
gcx.stroke();
// jie束
gcx.closePath();
</script>
2、绘制多个图形
/* 用他们去包裹你要绘制的图形，绘制一个包裹一个 */
cxt.beginPath(); 开始创建路径
cxt.closePath(); 关闭路径||从当前点到开始点的路径
五、绘制矩形
1、绘制一个简单矩形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<canvas id="box" width="500" height="500"></canvas>
</body>
</html>
<script>
let c = document.getElementById("box");
let gcx = c.getContext("2d");
gcx.beginPath();
gcx.rect(10,10,300,300);
gcx.stroke();
gcx.closePath();
</script>
2、填充矩形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<canvas id="box" width="500" height="500"></canvas>
</body>
</html>
<script>
let c = document.getElementById("box");
let gcx = c.getContext("2d");
gcx.beginPath();
gcx.rect(10,10,100,50);
gcx.strokeStyle = "red";
gcx.lineWidth = "5";
gcx.fillStyle = "pink";
gcx.fill();//开始填充
gcx.stroke();
gcx.closePath();
</script>
3、填充矩形
cxt.fillRect(x,y,width,height) 填充矩形
cxt.strokeRect(x,y,width,height) 绘制矩形边框
4、清除矩形区域
cxt.clearRect(x,y,width,height)
六、圆形
注：cxt.arc(x, y, radius, star,end, anticlockwise)
1、简单的一个圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<canvas id="box" width="500" height="500"></canvas>
</body>
</html>
<script>
let c = document.getElementById("box");
let gcx = c.getContext("2d");
gcx.beginPath();
gcx.arc(300,300,150,0,Math.PI*2,false);//一个Math.PI是180度
gcx.stroke();
gcx.closePath();
</script>
2、画一个圆弧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<canvas id="box" width="500" height="500"></canvas>
</body>
</html>
<script>
let c = document.getElementById("box");
let gcx = c.getContext("2d");
gcx.beginPath();
gcx.arc(300,300,150,0,Math.PI/180*90,true);//一个Math.PI是180度
gcx.fillStyle = "pink";
gcx.fill();
gcx.strokeStyle = "red";
gcx.lineWidth = 10;
gcx.closePath();//到关闭点，把它关闭一下，就可以产生圆弧了
gcx.stroke();//lian 线
</script>
六、贝赛尔曲线
1、二次贝赛尔曲线
quadraticCurveTo(cpx,cpy,x,y)
2、三次贝赛尔曲线
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
注:查看演示：http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html
七、元素的移动
1、位移
cxt.translate(x,y) 位移
cxt.scale(x,y) 缩放
cxt.rotate(angle) 旋转
注：只要你位移了就要给元素保存坐标和恢复坐标，因为位移的是坐标：
cxt.save(); 保存
cxt.restore(); 恢复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<canvas id="box" width="500" height="500"></canvas>
</body>
</html>
<script>
let c = document.getElementById("box");
let gcx = c.getContext("2d");
// 保存
gcx.save();
gcx.beginPath();
gcx.strokeStyle = "red";
gcx.lineWidth = 10;
// 移动
gcx.translate(100,0);
gcx.strokeRect(10,10,50,50);
gcx.closePath();
// 回复
gcx.restore();
gcx.beginPath();
gcx.strokeStyle = "pink";
gcx.lineWidth = 10;
gcx.strokeRect(10,10,50,50);
gcx.closePath();
</script>
八、绘制线性渐变
LinearGradient对象方法创建线性的渐变
createLinearGradient(xStart,yStart,xEnd,yEnd)
1、设置颜色渐变
addColorStop(offset,color)
2、绘制径向渐变
RadialGradient对象
createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)
3、绘制图形阴影
shadowOffsetX：阴影的横坐标位移量
shadowOffsetY：阴影的纵坐标位移量
shadowColor：阴影的颜色
shadowBlur：阴影的模糊范围
4、使用drawImage绘制图像
var img = new Image(); //创建图片对象
img.src = "img/html5.jpg"; //设置图片路径
img.onload = function(){
context.drawImage(img,10,10);
};
5、图像裁剪
clip()：
使用路径在画布上设置裁切区域
调用clip方法设置裁切区域
案例
一、时钟的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="700" height="700"></canvas>
<script>
setInterval(function(){
var c=document.getElementById("myCanvas");
var gcx=c.getContext("2d");
// 清空
gcx.clearRect(0,0,700,700)
// 得到当前的本机时间
var date=new Date();
var h=date.getHours();
var m=date.getMinutes();
var s=date.getSeconds();
// 绘制表盘
gcx.beginPath();
gcx.strokeStyle="pink";
gcx.lineWidth=8;
gcx.arc(350,350,300,0,Math.PI*2,false);
gcx.stroke();
gcx.closePath();
// 绘制时针刻度
for(var i=1;i<=12;i++){
gcx.save();
gcx.beginPath();
gcx.translate(350,350);
// 设置旋转
gcx.rotate(Math.PI/180*30*i)
gcx.moveTo(0,-300);
gcx.lineTo(0,-265);
gcx.strokeStyle="black";
gcx.lineWidth=6;
gcx.stroke()
gcx.closePath();
gcx.restore();
}
// 绘制分针
for(var i=1;i<=60;i++){
gcx.save();
gcx.beginPath();
gcx.translate(350,350);
// 设置旋转
gcx.rotate(Math.PI/180*6*i)
gcx.moveTo(0,-300);
gcx.lineTo(0,-285);
gcx.strokeStyle="red";
gcx.lineWidth=4;
gcx.stroke()
gcx.closePath();
gcx.restore();
}
// 绘制秒针
gcx.save();
gcx.beginPath();
gcx.translate(350,350);
// 根据得到的秒来进行旋转表针
gcx.rotate(Math.PI/180*6*s);
gcx.moveTo(0,20);
gcx.lineTo(0,-250);
gcx.strokeStyle="red";
gcx.lineWidth=2
gcx.stroke()
gcx.closePath();
gcx.restore();
// 绘制圆心的那个小圆型
gcx.save();
gcx.beginPath();
gcx.translate(350,350);
gcx.arc(0,0,15,0,Math.PI*2,false);
gcx.strokeStyle="red";
gcx.fillStyle="yellow";
gcx.fill();
gcx.stroke();
gcx.closePath();
gcx.restore();
// 绘制秒针上边那个小圆型
gcx.save();
gcx.beginPath();
gcx.translate(350,350);
// 根据得到的秒来进行旋转表针
gcx.rotate(Math.PI/180*6*s);
gcx.arc(0,-200,15,0,Math.PI*2,false);
gcx.strokeStyle="red";
gcx.fillStyle="yellow";
gcx.fill();
gcx.stroke();
gcx.closePath();
gcx.restore();
},1000)
</script>
</body>
</html>
883
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
