canvas常用原型方法及绘制图片应用

最新推荐文章于 2024-04-20 16:29:18 发布

绝坊

最新推荐文章于 2024-04-20 16:29:18 发布

阅读量363

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/casey130/article/details/126014543

版权

绘制线路

绘制三角形

<!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>
    </head>
    <body>
        <canvas id="canvans" width="500" height="500"></canvas>
        <img src="./img_the_scream.jpg" alt="">
        <script>
        var canvans = document.querySelector("#canvans")//获取canvans对象
        if (canvans.getContext) {		//监测浏览器是否支持canvas
            var ctx = canvans.getContext('2d');//获取2D画笔
            //绘制封闭三角形
            ctx.beginPath();//先抓起笔
            ctx.moveTo(100, 100);//一条路径的开始
    	    ctx.lineTo(200, 50);//连
    	    ctx.lineTo(200, 150);//连
            ctx.closePath(); //最终第三条边需要闭合
    	    ctx.stroke();//结束绘画
        }
        </script>
    </body>
</html>

注意每次线条绘画都需要ctx.beginPath()抓笔，然后ctx.stroke()放笔

绘制圆形

<!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>
    </head>
    <body>
        <canvas id="canvans" width="500" height="500"></canvas>
        <img src="./img_the_scream.jpg" alt="">
        <script>
        var canvans = document.querySelector("#canvans")//获取canvans对象
        if (canvans.getContext) {		//监测浏览器是否支持canvas
            var ctx = canvans.getContext('2d');//获取2D画笔
            //圆形
            ctx.beginPath();
            ctx.arc(300,300,50,0,2*Math.PI,true)
            ctx.stroke();
        }
        </script>
    </body>
</html>

画园：arc（）
画弧线：arc（）

绘制图片

需求：假设现在有一个h5海报宣传，但是图片中的二维码是动态的，并且随时生成的。这个时候就要用到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>
    </head>
    <body>
        <canvas id="canvans" width="500" height="500"></canvas>
        <img src="./img_the_scream.jpg" alt="">
        <script>
        var canvans = document.querySelector("#canvans")//获取canvans对象
        if (canvans.getContext) {		//监测浏览器是否支持canvas
            var ctx = canvans.getContext('2d');//获取2D画笔
            let img = document.querySelector('img')
            //绘制图片
            img.onload = function(){
                ctx.drawImage(img,200,200)  
            }
        }
        </script>
    </body>
</html>
<!-- ctx.

drawImage()是一个非常实用的原型方法

其他

canvas的绘制技术非常多，例如可以绘制阴影、线性渐变、径向渐变、颜色填充等

绝坊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas常用原型方法及绘制图片应用

需求假设现在有一个h5海报宣传，但是图片中的二维码是动态的，并且随时生成的。这个时候就要用到canvas的动态图片绘制技术。canvas的绘制技术非常多，例如可以绘制阴影、线性渐变、径向渐变、颜色填充等。...
复制链接

扫一扫