canvas的使用方法

最新推荐文章于 2024-05-27 08:51:51 发布

凌空暗羽

最新推荐文章于 2024-05-27 08:51:51 发布

阅读量3.3k

点赞数

分类专栏： # 基础前端笔记文章标签： canvas

本文链接：https://blog.csdn.net/weixin_46560512/article/details/109554782

版权

基础前端笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

之前学习canvas的时候就觉得canvas和一般的节点有一点不一样，现在重新看了一下，结合大佬们的提示，我又来了自导自演一波，不对的地方还希望大家斧正.
canvas对我来说，是用在web前端和小程序，我接触前端比较少，就主要说一下web方面的吧（小程序直接动态渲染就行）。总体上来说，和一般标签一样，有以下两种方法：
方法一，使用canvas标签+id/class来渲染，其动态变化的实现需要用到getComputedStyle函数，这个函数的用法是，得到初始化的样式，直接使用node.style.width/height是访问不到的，下面是代码实现：

<title>Document</title>
    <style>
        #mycanvas {
            background-color: yellowgreen;
            border: 1px red solid;
            width: 400px;
            height: 400px;
        }

<body>
    <div id="son">
        <canvas id="mycanvas">"不好意思，您的浏览器版本不支持canvas"</canvas>
        <div id="son_box"><button>点击运行动画</button></div>
    </div>

<script>
        //canvas动态变化思路一
        window.onload = function() {
            let mycanvas = document.getElementById("mycanvas");
            let btn = document.querySelector("#son_box");
            let gap = 0;
            btn.addEventListener("click", function() {
                console.log("点击函数被执行！");
                let timer = setInterval(function() {
                    gap += 2;
                    if ((parseInt(getComputedStyle(mycanvas).width) - gap) < 0) clearInterval(timer);
                    else mycanvas.style.width = (parseInt(getComputedStyle(mycanvas).width) - gap) + "px";
                    //else mycanvas.style.width = (parseInt(mycanvas.style.width) - gap) + "px";
                   // console.log("输出mycanvas.style.width的信息：" + mycanvas.style.width);这个是无效的！！！
                }, 200);
            });
        }
    </script>

在这里插入图片描述
可以看出获取为空，即获取失败。
方法二，利用canvas的内联初始化来动态修改标签属性，代码如下：

  <title>Document2</title>
    <style>
        #mycanvas {
            background-color: yellowgreen;
            border: 1px red solid;
        }

<body>

    <div id="son">
        <canvas height="150" width="300" style="background-color: royalblue; border:1rpx red solid;"></canvas>
        <canvas id="mycanvas" height="400" width="400">"不好意思，您的浏览器版本不支持canvas"</canvas>
        <div id="son_box"><button>点击运行动画</button></div>
    </div>

 <script>
        //canvas动态变化思路二
        window.onload = function() {
            let mycanvas = document.getElementById("mycanvas");
            let btn = document.querySelector("#son_box");
            let gap = 0;
            btn.addEventListener("click", function() {
                console.log("点击函数被执行！");
                let timer = setInterval(function() {
                    gap += 2;
                    if ((parseInt(mycanvas.height) - gap) < 0) clearInterval(timer);
                    else mycanvas.height = (parseInt(mycanvas.height) - gap);
                    //console.log("canvas的高度为：" + mycanvas.height);
                }, 200);
            });
        }
    </script>

其次，canvas在使用的时候需要注意两点：
1.当canvas的高度或者宽度为负数的时候，canvas会直接跳转成默认的宽度（300px）或者高度（150px）,因此当canvas在动画函数里面出现高度、宽度的异常变化时，可以检查一下是否是width/height被修改为负值；
2.canvas在内联时是省去'px'单位的，多加了单位反而会使对应的width/height直接变为0。

凌空暗羽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
canvas的使用方法

之前学习canvas的时候就觉得canvas和一般的节点有一点不一样，现在重新看了一下，结合大佬们的提示，我又来了自导自演一波，不对的地方还希望大家斧正. canvas对我来说，是用在web前端和小程序，我接触前端比较少，就主要说一下web方面的吧（小程序直接动态渲染就行）。总体上来说，和一般标签一样，有以下两种方法：方法一，使用canvas标签+id/class来渲染，其动态变化的实现需要用到getComputedStyle函数，这个函数的用法是，得到初始化的样式...
复制链接

扫一扫