web前端canvas详解&实例&高级动画（网易云音乐、多个背景动态圆扩散）

最新推荐文章于 2024-03-15 17:17:19 发布

乐邂逅

最新推荐文章于 2024-03-15 17:17:19 发布

阅读量1.6k

点赞数

分类专栏：原创文章文章标签： javascript html5 canvas

本文链接：https://blog.csdn.net/Hrenhua/article/details/121396920

版权

原创文章专栏收录该内容

20 篇文章 5 订阅

订阅专栏

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>

图片效果：（具体动画效果请下载源码）
在这里插入图片描述

乐邂逅

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
3
评论
web前端canvas详解&实例&高级动画（网易云音乐、多个背景动态圆扩散）

canvas画布首先得你的浏览器支持啊！下面的我都是默认了你的浏览器支持了的！1、首先，你得定义画布的高宽，画布外的点，你操作是没有任何效果的！<canvas id="can" width="600px" height="600px"></canvas>2、获取画布元素。js逻辑代码： let can = document.getElementById('can') let con = can.getContext("2d")3、画布的使用。（直线、矩形、
复制链接

扫一扫