【Canvas 01】Canvas入门—酷炫倒计时
2019-03-21 本文已影响0人
可爱多小姐
在慕课网上看到的前端关于canvas的一个倒计时小案例。
代码下载：Github
视频地址：慕课·canvas小球倒计时
倒计时
一、Canvas基础
1.1、Canvas画一个框
画一个canvas框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid salmon; display: block;margin: auto;"></canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("canvas");
canvas.width=1024 //设置宽度
canvas.height=700 //设置高度
var context = canvas.getContext("2d");
}
</script>
</body>
</html>
为canvas设置id="canvas",因为js需要引入。
1.2、Canvas画一个直线/三角形
画一个直线/三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid salmon; display: block;margin: auto;"></canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("canvas");
canvas.width=1024 //设置宽度
canvas.height=700 //设置高度
var context = canvas.getContext("2d");
context.moveTo(100,100) //设置起始坐标，向右为正，向下为正
context.lineTo(700,600)//设置坐标
context.lineTo(100,600)//设置坐标
context.lineTo(100,100)//设置结束坐标，与起始坐标一样，图形是一个封闭的
context.lineWidth=3//设置线条宽度
context.strokeStyle="red"//设置线条颜色
context.stroke()
}
</script>
</body>
</html>
1.3、Canvas画多个三角形
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid salmon; display: block;margin: auto;"></canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("canvas");
canvas.width=1024 //设置宽度
canvas.height=700 //设置高度
var context = canvas.getContext("2d");
context.beginPath()//开始
context.moveTo(100,100) //设置起始坐标，向右为正，向下为正
context.lineTo(700,600)//设置坐标
context.lineTo(100,600)//设置坐标
context.lineTo(100,100)//设置结束坐标，与起始坐标一样，图形是一个封闭的
context.lineWidth=3//设置线条宽度
context.strokeStyle="red"//设置线条颜色
context.closePath()//结束
context.stroke()
context.beginPath()//开始
context.moveTo(200,200)
context.lineTo(300,600)
context.lineTo(100,600)
context.lineTo(200,200)
context.lineWidth=3
context.strokeStyle="blue"
context.closePath()//结束
context.stroke()
}
</script>
</body>
</html>
需要在每一个加上context.beginPath()//开始和context.closePath()//结束，两者不需要成对出现，可以只出现context.beginPath()。
如果有context.closePath()，图形如果代码没有封口，也会封闭起来。
1.4、Canvas画多个圆
定义和用法
arc()方法创建弧/曲线（用于创建圆或部分圆）。
提示：如需通过arc()来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。
提示：请使用stroke()或fill()方法在画布上绘制实际的弧。
弧/曲线
- 中心：
arc(100,75,50,0*Math.PI,1.5*Math.PI) - 起始角：
arc(100,75,50,0,1.5*Math.PI) - 结束角：
arc(100,75,50,0*Math.PI,1.5*Math.PI)
JavaScript 语法：
context.arc(x,y,r,sAngle,eAngle,counterclockwise=false)
context.arc(中心横坐标,重心纵坐标,半径,起始角,结束角,顺时针）
规定False = 顺时针，true = 逆时针。不写默认顺时针
画一组圆
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid red;"></canvas>
<script>
var canvas = document.getElementById("canvas")
canvas.width = 1000
canvas.height = 1000
var ctx = canvas.getContext("2d")
ctx.lineWidth = 3
ctx.strokeStyle = "chartreuse"
//没有写ctx.closePath()，图形不封闭
for (var i = 0; i < 9; i++) {
ctx.beginPath()
ctx.arc(100 + 80 * i, 100, 30, 0, 2 * Math.PI * (i + 1) / 9, true)
ctx.stroke()
}
//写ctx.closePath()，图形封闭
for (var i = 0; i < 9; i++) {
ctx.beginPath()
ctx.arc(100 + 80 * i, 200, 30, 0, 2 * Math.PI * (i + 1) / 9, true)
ctx.closePath()
ctx.stroke()
}
//写ctx.closePath()，给图形填充颜色
ctx.fillStyle="coral"
for (var i = 0; i < 9; i++) {
ctx.beginPath()
ctx.arc(100 + 80 * i, 300, 30, 0, 2 * Math.PI * (i + 1) / 9, true)
ctx.closePath()
ctx.fill()
}
//没有写ctx.closePath()，给图形填充颜色
ctx.fillStyle="coral"
for (var i = 0; i < 9; i++) {
ctx.beginPath()
ctx.arc(100 + 80 * i, 400, 30, 0, 2 * Math.PI * (i + 1) / 9, true)
ctx.fill()
}
</script>
</body>
</html>
不管没有写ctx.closePath()，图形是否封闭。给图形填充颜色的效果是一样的。
