canvas画布首先得你的浏览器支持啊!
下面的我都是默认了你的浏览器支持了的!
1、首先,你得定义画布的高宽,画布外的点,你操作是没有任何效果的!
<canvas id="can" width="600px" height="600px"></canvas>
2、获取画布元素。
js逻辑代码:
let can = document.getElementById('can')
let con = can.getContext("2d")
3、画布的使用。(直线、矩形、⚪等等的使用)
首先!整个浏览器的窗口点的坐标轴定义是:x,y是canvas画布坐标轴,向右和向下递增(为正方向)。
1)画直线,这里我以画直角三角形为例。
con.lineWidth = 2 //定义画线的像素大小
con.strokeStyle = "red" //定义画线的颜色
// 画直线(现在)
con.moveTo(0,0) //起点(A)
con.lineTo(0,200)//终点(B)
con.moveTo(0,200)//起点(B)
con.lineTo(200,200)//终点(C)
con.moveTo(0,0)//起点(A)
con.lineTo(200,200)//终点
con.stroke()
2)画圆弧。
在画布上创建介于两个切线之间的弧: arcTo() 方法
context.arcTo(x1,y1,x2,y2,r);
// 画圆弧
con.moveTo(0,0) //定义圆弧的起点A(x,y)
con.arcTo(200,0,200,200,200) //控制点B(x1,y1)、C(x2,y2)(也是终点) 、半径r
con.stroke()
3)画矩形。
// 填充颜色
con.fillStyle = "red";
// fillRect(x, y, w, h):绘制填充颜色的矩形,
// 这里的x,y是canvas画布起点坐标,
// 画布的左上角坐标是(0, 0),向右和向下递增,
// 参数x,y是矩形的起始坐标,w和h代表绘制矩形的宽度和高度
con.fillRect(0,0,100,100)
// 绘制描边的矩形(空心)
con.strokeRect(0,110,100,100)
// 清除画布上的矩形区域。clearRect(x, y, w, h)
con.fillRect(0,220,100,100)
con.clearRect(0,220,50,50)
4)画圆。
// arc(x, y, radius, startAngle, endAngle, counterclockwise)
// 以(x, y)为圆心,r = radius画弧线,
// startAngle和 endAngle是起始角度和结束角度,用弧度表示,(pi=180°)
// 最后一个参数counterclockwise表示是否按逆时针方向画图,true为逆时针方向,false为顺时针方向。默认是false即顺时针方向。
con.arc(100,100,50,0,Math.PI*2,true)
con.stroke()
补充:(2021-12-8)
下面画了一些高阶实例(参考了:HTML5 高级之canvas 绘制图形,
请看代码和截图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas{
position: relative;
background-color: antiquewhite;
padding: 1px;
}
p{font-weight: 600;}
</style>
</head>
<body>
<p>颜色渐变</p>
<canvas id="canvas1" width="500" height="500"></canvas>
<p>太阳</p>
<canvas id="canvas2" width="500" height="500"></canvas>
<p>太极图</p>
<canvas id="canvas3" width="500" height="500"></canvas>
</body>
<script>
/*
渐变
canvas支持的渐变效果包括线性渐变或射线渐变,并且支持设置颜色转折点
语法:
创建线性渐变从(x1,y1)-->(x2,y2)
--createLinearGradient(x1,y1,x2,y2);
创建圆形放射性渐变,使用createRadialGradient,前两个参数是 圆心的位置,第三个参数是圆心的半径,第四,第五个是外圈的圆心位置,最后一个是外圆的半径。
--createRadialGradient(x1,y1,r1,x2,y2,r2);
第一个参数是颜色位置,可以为小数。0代表是开头,1代表是结束。第二个是颜色。
--addColorStop(position,color);指定渐变颜色值
*/
let ctx1 = document.getElementById('canvas1').getContext('2d')
let ctx2 = document.getElementById('canvas2').getContext('2d')
let ctx3 = document.getElementById('canvas3').getContext('2d')
/*
下面画渐变的效果图
*/
function drawGrad(){
let grad = ctx1.createLinearGradient(0,0,500,500)//创建线性渐变
// addColorStop 第一个参数是颜色位置,可以为小数。0代表是开头,1代表是结束。第二个是颜色。
grad.addColorStop(0,"red")
grad.addColorStop(0.5,"yellow")
grad.addColorStop(1,"blue")
ctx1.fillStyle = grad
ctx1.fillRect(0,0,500,500);
}
drawGrad()
/*
下面画一个太阳
*/
function drawRadial(){
let grad = ctx2.createRadialGradient(250,250,100,250,250,250)//创建圆形放射性渐变
// addColorStop 第一个参数是颜色位置,可以为小数。0代表是开头,1代表是结束。第二个是颜色。
grad.addColorStop(0,"red")
grad.addColorStop(0.5,"yellow")
grad.addColorStop(1,"blue")
ctx2.fillStyle = grad
ctx2.fillRect(0,0,500,500);
}
drawRadial()
/*
下面画一个太极
*/
function temp(x,y,r,rad1,rad2,bool,color){
ctx3.beginPath()
ctx3.arc(x,y,r,rad1,rad2,bool)
ctx3.closePath()
ctx3.fillStyle = color
ctx3.fill()
// ctx.strokeStyle = color
// ctx.stroke()
}
function drawTaichi(){
temp(250,250,250,Math.PI/2,Math.PI*1.5,false,"#000")
temp(250,250,250,Math.PI/2,Math.PI*3/2,true,"#fff")
temp(250,125,125,0,Math.PI*2,false,"#000")
temp(250,375,125,0,Math.PI*2,false,"#fff")
temp(250,125,10,0,Math.PI*2,false,"#fff")
temp(250,375,10,0,Math.PI*2,false,"#000")
}
drawTaichi()
</script>
</html>
补充:2021-12-15
下面用 css3 + js
动画,实现画出了类似网易云播放器的播放音乐开关的效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body {
height: 100%;
width: 100%;
margin: 0;
}
.main{
background-color: antiquewhite;
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
.circle{
width: 220px;
height: 220px;
border-radius: 50%;
border: 1px solid #a5d4f3;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
cursor: pointer;
opacity: 0;
/* transform: translate(-10vw,-10vw); */
}
.center {
width: 200px;
height: 200px;
/* border-radius: 50%; */
/* border: 1px solid red; */
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
cursor: pointer;
}
.go{
animation-duration: 3s;
animation-name: mychange;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes mychange {
0%{
transform: scale(1,1);
opacity: 1;
}
100%{
transform: scale(4,4);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="main" onclick="clickEvent()">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="center">
<img src="./音乐logo.png" title="点击" />
</div>
</div>
</body>
<script>
let n = 1
function clickEvent(){
let nodes = document.getElementsByClassName("circle")
if(n%2==1)
for(let i=0;i<nodes.length;i++){
nodes[i].style.animationDelay = i*0.5+"s"
nodes[i].classList.add("go")
}
else{
for(let i=0;i<nodes.length;i++){
nodes[i].classList.toggle("go")
}
}
n++
}
</script>
</html>
图片效果:(具体动画效果请下载源码)
补充实例:2021-12-19
多个背景动态圆的扩散
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多个背景动态圆</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
/** @type {HTMLCanvasElement} */
let can = document.getElementById("canvas")
let ctx = can.getContext("2d")
// 屏幕的宽高
let width = document.documentElement.clientWidth
let height = document.documentElement.clientHeight
can.style.position = 'fixed'
can.style.display = 'inline-block' //不出滚动
can.style.zIndex = '-1'
can.style.top = '0'
can.style.left = '0'
can.width = width
can.height = height
can.style.backgroundColor = "antiquewhite"
// 获取屏幕的尺寸
function getElementSize(){
let clientWidth = width
let clientHeight = height
return [clientWidth,clientHeight]
}
// 随机生成颜色
function getRamdomColor(){
let R = Math.round(Math.random()*255)
let G = Math.round(Math.random()*255)
let B = Math.round(Math.random()*255)
let a = 10
let rgba = "rgba("+R+","+G+","+B+","+a+")"
return rgba
}
// 获取随机圆形
function getRamdomCircle(arr){
let x = Math.random()*arr[0] // [0,1)*width
let y = Math.random()*arr[1] // [0,1)*height
let r = Math.random()*25
let angle = Math.PI*2
let bool = false
let rgb = getRamdomColor()
// let opacity = Math.random()
let circle = [x,y,r,0,angle,bool,rgb]
return circle
}
// 圆的类
class Circle{
constructor(x,y,r,startAngle,endAngle,bool,rgb){
this.x = x
this.y = y
this.r = r
this.startAngle = startAngle
this.endAngle = endAngle
this.bool = bool
this.strokeColor = rgb
}
// 绘画单个圆
drawCircle(){
ctx.beginPath()
ctx.fillStyle = this.strokeColor
ctx.arc(this.x,this.y,this.r,this.startAngle,this.endAngle)
ctx.fill()
}
dynamicRadius(){
this.r++
if(this.r>50){
// 清除该区域圆
ctx.clearRect(this.x-this.r,this.y-this.r,this.r*2,this.r*2)
return
}
// 下面是重新画圆,每一次半径变化则重新绘画
ctx.beginPath()
ctx.fillStyle = this.strokeColor
ctx.arc(this.x,this.y,this.r,this.startAngle,this.endAngle,this.bool)
ctx.fill()
}
}
// 主程序
function main(){
let size = getElementSize()
let tmpCircle = getRamdomCircle(size)
let circle = new Circle(tmpCircle[0],tmpCircle[1],tmpCircle[2],tmpCircle[3],
tmpCircle[4],tmpCircle[5],tmpCircle[6])
function draw(){
// 画单个动态圆
circle.drawCircle()
circle.dynamicRadius()
requestAnimationFrame(draw)
}
draw()
}
setInterval(main,300)
</script>
</html>
图片效果:(具体动画效果请下载源码)