H5新增标签画布canvas（一）

程序员文章站 2022-05-30 09:26:20

...

文章目录

- - 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>

H5新增标签画布canvas（一）

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>

H5新增标签画布canvas（一）

 <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>

H5新增标签画布canvas（一）

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( ) 以填充的方式绘制图形，默认填充黑色

H5新增标签画布canvas（一）

绘制样式属性

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>

H5新增标签画布canvas（一）

<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>

H5新增标签画布canvas（一）

绘制线条

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>

H5新增标签画布canvas（一）

图形路径 (图形)

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>

H5新增标签画布canvas（一）

闭合路劲：

<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>

H5新增标签画布canvas（一）

图形边界样式属性

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>

H5新增标签画布canvas（一）

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>

H5新增标签画布canvas（一）

H5新增标签画布canvas（一）

文章目录

H5新增标签画布canvas（一）

canvas介绍

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

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

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

绘制方式

绘制样式属性

绘制线条

图形路径 (图形)

闭合路劲：

图形边界样式属性

lineCap 端点样式

H5新增的标签以及改良的标签

h5使用canvas画布实现手势解锁

canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法

关于canvas画布的操作，看这一篇就足够了！

在canvas(画布）上绘制一个矩形盒子并使用按键移动这个盒子

使用h5新增的canvas标签绘制太极图案-代码

H5新增标签

H5新增标签画布canvas（一）

H5中canvas标签制作时钟

H5强大的画布标签canvas和svg