H5新增标签画布canvas（一）

最新推荐文章于 2024-05-17 15:26:01 发布

拾玥花开

最新推荐文章于 2024-05-17 15:26:01 发布

阅读量612

点赞数 1

分类专栏： H5 canvas 文章标签： canvas html5 vue.js

本文链接：https://blog.csdn.net/weixin_44691513/article/details/109063187

版权

H5 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

canvas

4 篇文章 0 订阅

订阅专栏

文章目录

- - H5新增标签画布canvas（一）

H5新增标签画布canvas（一）

canvas介绍

在渲染复杂的动效、把数据可视化图形显示、游戏场景等需求，都会用canvas技术，比dom操作性能更高

*特点*

① H5新增的图形标签，通过提供的JavaScript函数绘制各种图表或利用算法实际非常华丽的动效

② 在以前是用Flash技术实现，但不能和JS交互,

③ 适合动态图形绘制

*缺点*

是位图，缩放会模糊

API

环境目前只有2d绘制

getContext(‘2d’) 创建2D绘制环境

绘制矩形

rect(x,y,w,h) 绘制矩形

<style>
        canvas{
            border: 1px solid blue;
        }
</style>
<body>
    <canvas></canvas>
</body>
<script>
    const oC=document.querySelector('canvas')
    oC.width = 600
    oC.height= 400
    const ctx=oC.getContext('2d')
    //绘制矩形，rect(x,y,w,h) x，y代表坐标位置，w，h代表width和height
    rect(100.50,200,100)
    // 2画笔 画线条 默认黑色 空心矩形
    cxt.stroke()
</script>

在这里插入图片描述

fillRect(x,y,w,h) 绘制填充实心矩形

strokeRect(x,y,w,h) 绘制空心矩形

clearRect(x,y,w,h) 清除矩形选区

 <style>
        html,body{
            width: 100vw;
            height: 100vh;
            display: flex;
            overflow: hidden;
        }
        canvas{
            margin: auto;
            background: hotpink;
        }
    </style>
</head>
<body>
    <canvas width="500" height="400"></canvas>
    <script>
    	 const oC = document.querySelector('canvas')
         const cxt=oC.getContext('2d');
        // 以填充方式 绘制 矩形 默认黑色
         ctx.fillRect(100,50,200,100)
    </script>
</body>

在这里插入图片描述

 <style>
        canvas{
            border: 1px solid blue;
            /*width: 500px;   !*500/300=1.666倍*!*/
            /*height: 300px;  !*300 / 150 = 2*!*/
        }
    </style>
</head>
<body>
    <!-- 画布 -->
    <canvas width="500" height="400">
        您的浏览器不支持canvas，请用标签浏览器
    </canvas>
    <script>
        const oC = document.querySelector('canvas')
        oC.width = 600
        oC.height= 400
        const cxt = oC.getContext('2d')

        cxt.strokeRect(100,50,200,100)
    </script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jdNz0IfZ-1602602007637)(E:\凯文的前端博客\框架部分images\2.3.png)]$

rect() 方法是单纯的画出一个矩形框，调用stroke() 或 fill()后才会真正作用于画布。ctx.rect(0,0,100,50); 仅仅是画出一个区域.而strokeRect() 方法是用一个预定义的笔触画出一个矩形框，你就可以想成使用一直有颜色的画笔去画一个矩形

 <style>
        html,body{
            width: 100vw;
            height: 100vh;
            display: flex;
            overflow: hidden;
        }
        canvas{
            margin: auto;
            background: hotpink;
        }
    </style>
</head>
<body>
    <!-- 画布 -->
    <canvas width="500" height="400">
        您的浏览器不支持canvas，请用标签浏览器
    </canvas>

    <script>
        const oC = document.querySelector('canvas')
        const cxt = oC.getContext('2d')
        // 以填充方式 绘制 矩形 默认黑色
        cxt.fillRect(100,50,200,100)

        // 服务大厅特效的时候 基本都要使用此方法
        cxt.clearRect(200,50,100,100)
    </script>
</body>

 <style>
        html,body{
            width: 100vw;
            height: 100vh;
            display: flex;
            overflow: hidden;
        }
        canvas{
            margin: auto;
            background: hotpink;
        }
    </style>
</head>
<body>
    <!-- 画布 -->
    <canvas width="500" height="400">
        您的浏览器不支持canvas，请用标签浏览器
    </canvas>

    <script>
        const oC = document.querySelector('canvas')
        const cxt = oC.getContext('2d')
        // 以填充方式 绘制 矩形 默认黑色
        cxt.rect(100,50,200,100)

        cxt.fill()
    </script>
</body>

绘制方式

stroke( ) 以边框线的方式绘制图形，默认填充黑色

fill( ) 以填充的方式绘制图形，默认填充黑色

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FfM6BJiY-1602602007640)(E:\凯文的前端博客\框架部分images\2.4.png)]$

绘制样式属性

fillStyle 填充颜色

strokeStyle 触笔颜色

lineWidth 触笔粗细(线宽)

<style>
        html,body{
            width: 100vw;
            height: 100vh;
            display: flex;
            overflow: hidden;
        }
        canvas{
            margin: auto;
            background: hotpink;
        }
    </style>
</head>
<body>
    <!-- 画布 -->
    <canvas width="500" height="400">
        您的浏览器不支持canvas，请用标签浏览器
    </canvas>

    <script>
        const oC = document.querySelector('canvas')
        const cxt = oC.getContext('2d')
        cxt.fillStyle = '#f00'
        cxt.fillStyle = 'rgb(0,255,0)'
        cxt.fillStyle = 'rgba(0,0,255,0.5)'
        cxt.fillStyle = 'pink'
        cxt.fillStyle = 'hsl(360,100%,50%)'
        // 以填充方式 绘制 矩形 默认黑色
        cxt.rect(100,50,200,100)

        cxt.fill()
    </script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1AvcbuVD-1602602007641)(E:\凯文的前端博客\框架部分images\2.6.png)]$

<script>
        const oC = document.querySelector('canvas')
        const cxt = oC.getContext('2d')

        // 有边框 是从边框的中间开始绘制
        // 15 / 2 = 7.5
        cxt.lineWidth = 15

        cxt.strokeStyle = '#f00'
        cxt.strokeStyle = 'rgb(0,255,0)'

        // cxt.strokeStyle = 'rgba(0,0,255,0.5)'
        // cxt.strokeStyle = 'pink'
        // cxt.strokeStyle = 'hsl(360,100%,50%)'
        // 以填充方式 绘制 矩形 默认黑色

        //left: 100 top: 50
        // cxt.rect(100,50,200,200)
        cxt.rect(99.5,99.5,200,200)
        cxt.fill()
        cxt.stroke()

        // 优先 前后覆盖
        // cxt.fill()
    </script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j177lZZC-1602602007642)(E:\凯文的前端博客\框架部分images\2.5.png)]$

绘制线条

moveTo(x,y) 从x,y开始绘制

lineTo(x,y) 绘制到x，y

      html,body{
            width: 100vw;
            height: 100vh;
            display: flex;
            overflow: hidden;
        }
        canvas{
            margin: auto;
            background: hotpink;
        }
    </style>
</head>
<body>
    <!-- 画布 -->
    <canvas width="500" height="400">
        您的浏览器不支持canvas，请用标签浏览器
    </canvas>

    <script>
        const oC = document.querySelector('canvas')
        const cxt = oC.getContext('2d')

        // 有边框 是从边框的中间开始绘制
        // 15 / 2 = 7.5
        cxt.lineWidth = 15

        // 起始点
        cxt.moveTo(0,100)
        // 终点
        cxt.lineTo(500,100)

        cxt.moveTo(0,300)
        cxt.lineTo(500,300)

        cxt.moveTo(100,0)
        cxt.lineTo(100,400)

        cxt.moveTo(400,0)
        cxt.lineTo(400,400)

        cxt.stroke()
    </script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rJKMT550-1602602007643)(E:\凯文的前端博客\框架部分images\2.7.png)]$

图形路径 (图形)

beginPath() 开始路径

closePath() 结束路径

  const oC = document.querySelector('canvas')
        const cxt = oC.getContext('2d')
        // 有边框 是从边框的中间开始绘制
        // 15 / 2 = 7.5
        cxt.lineWidth = 15
        cxt.strokeStyle = 'pink'
        cxt.beginPath()
        // 起始点
        cxt.moveTo(0,100)
        // 终点
        cxt.lineTo(500,100)
        cxt.stroke()
        
        cxt.strokeStyle = 'green'
        cxt.beginPath()
        cxt.lineTo(0,300)
        cxt.lineTo(500,300)
        cxt.stroke()

        cxt.strokeStyle = 'blue'
        cxt.beginPath()
        cxt.moveTo(100,0)
        cxt.lineTo(100,400)
        cxt.stroke()

        cxt.strokeStyle = 'black'
        cxt.beginPath()
        cxt.moveTo(400,0)
        cxt.lineTo(400,400)

        cxt.stroke()

        // 带上了beginPath 图形要指定绘制方式
        // 每个图形 都要指定绘制方式
        // beginPath 可以隔开与上一个路径的关系

        // 有继承性
        // 隔离性
    </script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jm1zE9fV-1602602007643)(E:\凯文的前端博客\框架部分images\2.8.png)]$

闭合路劲：

<script>
        const oC = document.querySelector('canvas')
        const cxt = oC.getContext('2d')

        // 有边框 是从边框的中间开始绘制
        // 15 / 2 = 7.5
        cxt.lineWidth = 15
        cxt.strokeStyle = 'red'
        cxt.beginPath()
        cxt.moveTo(100,100)
        cxt.lineTo(500,100)
        cxt.lineTo(100,300)
        // 闭合 路径 从结束点 回到 起始点
        cxt.closePath()
        // cxt.lineTo(100,100)
        cxt.stroke()
    </script>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WKfd1Ewy-1602602007644)(E:\凯文的前端博客\框架部分images\2.10.png)]$

图形边界样式属性

lineJoin 边界连接点样式

miter(默认值)

round(圆角)

bevel(斜角)

<script>
        const oC = document.querySelector('canvas')
        const cxt = oC.getContext('2d')

        // 有边框 是从边框的中间开始绘制
        // 15 / 2 = 7.5
        cxt.lineWidth = 15
        cxt.strokeStyle = 'red'
        cxt.lineJoin = 'round'
        cxt.lineJoin = 'bevel'
        cxt.beginPath()
        cxt.moveTo(100,100)
        cxt.lineTo(400,100)
        cxt.lineTo(100,300)
        // 闭合 路径 从结束点 回到 起始点
        cxt.closePath()
        // cxt.lineTo(100,100)
        cxt.stroke()
    </script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ESeVaq7e-1602602007645)(E:\凯文的前端博客\框架部分images\2.11.png)]$

lineCap 端点样式

butt(默认值)

round(圆角)

square(高度多出线宽一半)

 <script>
        const oC = document.querySelector('canvas')
        const cxt = oC.getContext('2d')

        // 有边框 是从边框的中间开始绘制
        // 15 / 2 = 7.5
        cxt.lineWidth = 10
        cxt.strokeStyle = 'red'

        cxt.strokeStyle = 'blue'
        cxt.beginPath()
        cxt.moveTo(100,50)
        cxt.lineTo(100,300)
        cxt.stroke()

        cxt.strokeStyle = 'black'
        cxt.lineCap = 'round'
        cxt.lineCap = 'square'
        // 多出10px高度
        cxt.beginPath()
        cxt.moveTo(130,50)
        cxt.lineTo(130,300)

        cxt.stroke()

        // 带上了beginPath 图形要指定绘制方式
        // 每个图形 都要指定绘制方式
        // beginPath 可以隔开与上一个路径的关系

        // 有继承性
        // 隔离性
    </script>

)
cxt.moveTo(100,50)
cxt.lineTo(100,300)
cxt.stroke()

    cxt.strokeStyle = 'black'
    cxt.lineCap = 'round'
    cxt.lineCap = 'square'
    // 多出10px高度
    cxt.beginPath()
    cxt.moveTo(130,50)
    cxt.lineTo(130,300)

    cxt.stroke()

    // 带上了beginPath 图形要指定绘制方式
    // 每个图形 都要指定绘制方式
    // beginPath 可以隔开与上一个路径的关系

    // 有继承性
    // 隔离性
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GWetl4t5-1602602007645)(E:\凯文的前端博客\框架部分images\2.12.png)]$

拾玥花开

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5新增标签画布canvas（一）

文章目录H5新增标签画布canvas（一）canvas介绍**fillRect(x,y,w,h) 绘制填充实心矩形****strokeRect(x,y,w,h) 绘制空心矩形****clearRect(x,y,w,h) 清除矩形选区**绘制方式绘制样式属性绘制线条图形路径 (图形)闭合路劲：图形边界样式属性lineCap 端点样式H5新增标签画布canvas（一）canvas介绍在渲染复杂的动效、把数据可视化图形显示、游戏场景等需求，都会用canvas技术，比dom操作性能更高*特点*
复制链接

扫一扫

专栏目录