H5--Canvas使用以及API

Goat恶霸詹姆斯

已于 2023-09-24 23:51:40 修改

阅读量1.2k

点赞数 1

分类专栏：我的笔记文章标签： canvas html5 前端

于 2023-05-07 20:10:48 首次发布

本文链接：https://blog.csdn.net/m0_59962790/article/details/130535604

版权

我的笔记专栏收录该内容

45 篇文章 0 订阅

订阅专栏

Canvas前端绘图工具，Canvas API 提供了一个通过JavaScript 和 HTML的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

<canvas id="canvas"></canvas>

标签属性：

获取画笔：

const ctx = canvas.getContext('2d');

API:

线条相关：

绘制矩形：

路径

绘制路径

填充和描边

渐变
返回的CanvasGradient对象的addColorStop(offset, color)添加渐变颜色

绘制文本

文本样式

阴影

变换

合成

绘制图像

像素控制

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>Document</title>
</head>
<body>
     <canvas id="canvas" width="400" height="400"/>

</body>
<script type="text/javascript">
    canvas.style.background="pink" //设置背景颜色为粉色
    let ctx = canvas.getContext('2d') //获取画笔
    ctx.save() //保存当前的画笔状态
    ctx.strokeStyle="blue" //设置画笔颜色为蓝色
    ctx.lineWidth="2" //线条的宽度为2
    ctx.beginPath() //开始一个新的路径
    ctx.strokeRect(100,100,100,100) //绘制矩形100x100
    ctx.restore() //恢复画笔，此时画笔为黑色了
    ctx.moveTo(100,100) //画笔移至坐标（100,100）
    ctx.arc(200,200,100,0,Math.PI*2/3,true) //绘制圆弧，原心坐标（200,200），半径100，起始弧度为0，结束弧度为2/3
    ctx.stroke() //画弧
    //随鼠标按下有绘制痕迹
    canvas.onmousedown = function(e){ 
        ctx.save() //保存画笔状态
        ctx.strokeStyle="green" //配置画笔颜色为绿色
        ctx.beginPath() //开始新的路径
        //使用鼠标相对浏览器的x,y减去画布距离浏览器的x,y获取到在画布里鼠标的坐标。
        ctx.moveTo(e.clientX-canvas.offsetLeft,e.clientLeft-canvas.offsetTop)//移动到鼠标按下的坐标处
        console.log(canvas.offsetLeft,canvas.offsetTop);
        //鼠标移动时候画线到鼠标所到位置
        document.onmousemove=function(e){
            ctx.lineTo(e.clientX-canvas.offsetLeft,e.clientY-canvas.offsetTop)
            ctx.stroke() //画图
            ctx.restore() //恢复画笔状态
        }
        document.onmouseup=function(){
            document.onmousemove = document.onmouseup=null //画完结束恢复鼠标移动的鼠标事件
        }
        return
    }
    
</script>
</html>

旋转放大缩小：

<!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="canvas" width="300" height="300"></canvas>
</body>
<script type="text/javascript">
    let flag=0 
    let scale = 0 //放大的比例
    let flagScale=0
    canvas.style.background="pink"
    let ctx = canvas.getContext("2d")
    ctx.save()
    ctx.translate(150,150)//画笔平移到坐标（150，150）
    ctx.beginPath() //开始新的路径
    ctx.fillRect(-50,-50,100,100) //以（150，150为矩形中心画矩形）
    ctx.restore()
    //设置计时器自动调整放大和缩小
    setInterval(()=>{
        flag++
        ctx.clearRect(0,0,canvas.width,canvas.height) //清除画布
        ctx.save()
        ctx.translate(150,150)
        ctx.rotate(flag*Math.PI/180) //旋转一定的角度
        //scale最大为100，超过100那么开始缩小，到0开始增大
        if(scale==100){
            flagScale=-1
        }else if(scale==0){
            flagScale=1
        }
        scale+=flagScale
        ctx.scale(scale/50,scale/50)
        ctx.beginPath()
        ctx.fillRect(-50,-50,100,100)
        ctx.restore()
    },1000/60)
</script>
</html>

绘制钟表：

<!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="canvas" width="400" height="400" />
</body>
<script type="text/javascript">
    canvas.style.backgroundColor = "pink"
    let ctx = canvas.getContext("2d")
    // setInterval(()=>{
    //     ctx.clearRect(0,0,canvas.width,canvas.height)//每秒清除画布
    //     move() //绘制钟表
    // },1000)
    move() //初始化钟表
    function move(){
        ctx.save()
        ctx.lineWidth = "8"
        ctx.strokeStyle = "black"
        ctx.lineCap = "round"
        ctx.translate(200, 200)
        ctx.rotate(-90 * Math.PI / 180) //逆时针旋转90度，修改了坐标的方向右上为正
        ctx.beginPath()

        ctx.save()
        ctx.strokeStyle = "blue"
        ctx.lineWidth = "14"
        ctx.beginPath()
        ctx.arc(0, 0, 140, 0, 360 * Math.PI / 180)//画圆弧，最外层的圆半径为140
        ctx.stroke()
        ctx.restore()
        //时针刻度
        ctx.save()
        for (let i = 0; i < 12; i++) {
            ctx.rotate(30 * Math.PI / 180) //将圆盘分割成12份为时针的刻度
            ctx.beginPath()
            ctx.moveTo(100, 0) //距离圆环40处
            ctx.lineTo(120, 0) //画长度20
            ctx.stroke()
        }
        ctx.restore()
        // 分针刻度
        ctx.save()
        ctx.lineWidth = "4"
        for (let i = 0; i < 60; i++) { //将圆盘分割成60份为分针的刻度
            if (i % 5 != 0) { //避开5的倍数绘制，因为已经存在了时针的刻度
                ctx.beginPath()
                ctx.moveTo(117, 0)
                ctx.lineTo(120, 0)
                ctx.stroke()
            }
            ctx.rotate(6 * Math.PI / 180) //每次旋转6度
        }
        ctx.restore()
        //获取当前时间以便绘制指针的位置
        let seconds = new Date().getSeconds()
        let minutes = new Date().getMinutes() + seconds / 60
        let hour = new Date().getHours() + minutes / 60
        hour = hour > 12 ? hour - 12 : hour

        //时针
        ctx.save()
        ctx.lineWidth = 14
        ctx.rotate(hour * 30 * Math.PI / 180)
        ctx.beginPath()
        ctx.moveTo(-20, 0)
        ctx.lineTo(80, 0)
        ctx.stroke()
        ctx.restore()
        //分针
        ctx.save()
        ctx.lineWidth=10
        ctx.rotate(minutes * 6 * Math.PI / 180)    
        ctx.beginPath()
        ctx.moveTo(-28,0)
        ctx.lineTo(112,0)
        ctx.stroke()
        ctx.restore()
        //秒针
        ctx.save()
        ctx.strokeStyle="#D40000"
        ctx.rotate(seconds * 6 * Math.PI / 180)    
        ctx.lineWidth=6
        ctx.beginPath()
        ctx.moveTo(-30,0)
        ctx.lineTo(83,0)
        ctx.stroke()
        ctx.restore()

        ctx.save()
        ctx.fillStyle="#D40000"
        ctx.beginPath()
        ctx.moveTo(0,0)
        ctx.arc(0,0,10,0,360*Math.PI/180)
        ctx.fill()
        ctx.restore()

        ctx.save()
        ctx.lineWidth=6
        ctx.strokeStyle="#D40000"
        ctx.rotate(seconds * 6 * Math.PI / 180)

        ctx.beginPath()
        ctx.arc(96,0,10,0,360*Math.PI/180)
        ctx.stroke()

        ctx.restore()
        ctx.restore()
    }
</script>

</html>

canvas 搭配video

<!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>
    <video id="video" loop autoplay src="https://imgs-qn.51miz.com/preview/video/00/00/12/72/V-127220-21D61AFB.mp4" width="0" height="0"></video>
    <canvas id="canvas" width="300" height="200"></canvas>
</body>
<script type="text/javascript">
    let ctx = canvas.getContext('2d')
    video.addEventListener("loadeddata", function () {
        console.log(123)
        setInterval(function(){
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height) 
        })
    })
</script>

</html>

写入图片：

<!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="canvas" width="400" height="400" />
</body>
<script type="text/javascript">
    canvas.style.background = "pink"
    let ctx = canvas.getContext("2d")
    let img = new Image() //创建image对象
    img.src = "img.jpg" //添加资源路径
    img.onload=()=>{
        ctx.drawImage(img, 0, 0,canvas.width, canvas.height)        
    }
</script>

</html>

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>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0
    }
    html,body{
        height:100%;
        overflow: hidden;
    }
    #canvas{
        position: absolute;
        top:0;
        left:0;
        transition:1s
    }
    .wrap,.wrap>div{
        height: 100%
    }
    .wrap>div{
        background-image: url("./img2.jpg");
        background-size: 100% 100%;
    }
</style>
<body>
    <div class="wrap">
        <canvas id="canvas"></canvas>
        <div></div>
    </div>
</body>
<script type="text/javascript">
    // 获取宽高，
    canvas.width=document.documentElement.clientWidth
    canvas.height=document.documentElement.clientHeight
    let ctx = canvas.getContext("2d")
    //获取canvas画的图片，父级元素的背景是底图
    let img =new Image()
    img.src="img.jpg"
    let imgData = ctx.getImageData(0,0,canvas.width,canvas.height)
    img.onload=function (){
        draw()
    }
    function draw(){
        ctx.drawImage(img,0,0,imgData.width,imgData.height) //绘画图片
        canvas.addEventListener("touchstart",(e)=>{ //点击到屏幕时触发
            console.log(e)
            let touchC= e.changedTouches[0]
            let x = touchC.clientX-canvas.offsetLeft
            let y = touchC.clientY-canvas.offsetTop
            ctx.lineWidth=20
            ctx.lineCap="round"
            ctx.lineJoin="round"
            ctx.globalCompositeOperation="destination-out"
            ctx.save()
            ctx.beginPath()
            ctx.moveTo(x,y)
            ctx.lineTo(x+1,y+1)
            ctx.stroke()
            ctx.restore()
        })
        canvas.addEventListener("touchmove",(e)=>{ //滑动时触发
            let touchC= e.changedTouches[0]
            let x = touchC.clientX-canvas.offsetLeft
            let y = touchC.clientY-canvas.offsetTop
            console.log(x,y)
            ctx.save()
            // ctx.arc(x,y,20,0,360*Math.PI/180)
            ctx.lineTo(x+1,y+1)
            ctx.stroke()
            ctx.restore()
        })
        canvas.addEventListener("touchend",(e)=>{ //离开屏幕时触发
            let flag =0
            let imgData = ctx.getImageData(0,0,canvas.width,canvas.height)
            let allPixle = imgData.width*imgData.height //获取图片像素
            for(let i=0;i<allPixle;i++){
                if(imgData.data[4*i+3]==0){
                    flag++
                }
            }
            if(flag>allPixle*1/2){ //滑过超过一半的话，隐藏画布
                canvas.style.opacity=0
            }
        })
        canvas.addEventListener("transitionend",function(){
            this.remove()//隐藏画布过渡时触发，删除画布
        })
    }
    ctx.save()
    ctx.beginPath()
    ctx.restore()
</script>
</html>

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>Document</title>
</head>

<body>
    <canvas id="canvas" />
</body>
<script type="text/javascript ">
    let ctx = canvas.getContext('2d')
    let oldImg = new Image()
    oldImg.src = "img2.jpg"
    oldImg.onload=()=>{
        canvas.width=oldImg.width*2
        canvas.height=oldImg.height
        draw()
    }
    function draw(){
        ctx.drawImage(oldImg,0,0)
        //获取原图的imageData
        let oldImgData = ctx.getImageData(0,0,oldImg.width,oldImg.height)
        // 创建新的图片数据，按照原图的尺寸
        let newImgData = ctx.createImageData(oldImg.width,oldImg.height)
        console.log(newImgData)
        let size = 20 //指定马赛克块的大小
        for(let i = 0;i<oldImgData.width/size;i++){
            for(let j =0;j<oldImgData.height/size;j++){
                // （i,j）每个马赛克的巨型坐标
                //获取原图颜色，在像素区域内随机选取一个颜色
                let color = getColor(oldImgData,i*size+Math.floor(Math.random()*size),j*size+Math.floor(Math.random()*size))
                //把整个20以内的所有像素全部设置为一样的颜色
                for(let a=0;a<size;a++){
                    for(let b=0;b<size;b++){
                        setColor(newImgData,i*size+a,j*size+b,color)
                    }
                }
            }
        }

        ctx.putImageData(newImgData,oldImg.width,0)
    }
    function getColor(imgData,x,y){ //每个像素是由rgba的形式出现
        let data = imgData.data
        let w = imgData.width
        let h = imgData.height
        let color = Array(4)
        //y*w+x是指该元素前有多少个像素，来定位当前的像素
        color[0]=data[(y*w+x)*4]
        color[1]=data[(y*w+x)*4+1]
        color[2]=data[(y*w+x)*4+2]
        color[3]=data[(y*w+x)*4+3]
        return color
    }
    function setColor(imgData,x,y,color){
        let data = imgData.data
        let w = imgData.width
        let h = imgData.height
        data[(y*w+x)*4]=color[0]
        data[(y*w+x)*4+1]=color[1]
        data[(y*w+x)*4+2]=color[2]
        data[(y*w+x)*4+3]=color[3]
    }
</script>

</html>

Goat恶霸詹姆斯

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
1
评论
H5--Canvas使用以及API

Canvas前端绘图工具，Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。返回的CanvasGradient对象的addColorStop(offset, color)添加渐变颜色。canvas 搭配video。
复制链接

扫一扫