Canvas学习

1.加载图片img标签：

　　有两种html加载服务，Live Serve和 本地port，在canvas标签内都不能直接套用img-src图片直接显示，有两种方式：

　　【canvas对width和height敏感，不匹配会导致显示不完全】

<div>
        <img id="getImg" src="img/图1.jpg" width="960" height="540" />
    </div>

    <script>
        var c = document.getElementById("huaBu");
        var ctx = c.getContext("2d");
        var img = document.getElementById("getImg");
        ctx.drawImage(img, 0, 0,960,540); //直接绘制图片到画布上
    </script>

<div>
        <h3>画布</h3>
        <canvas id="huaBu" width="960" height="540">
            抱歉，您的浏览器不支持该标签(浏览器不支持canvas标签而显示出的替换文本)
        </canvas>
    </div>
    <div>
        <h3>图像</h3>
        <img id="getImg" src="img/图1.jpg" width="960" height="540" />
    </div>

    <script>
        var c = document.getElementById("huaBu");
        var ctx = c.getContext("2d");
        var img=new Image();
        img.src="img/图1.jpg";
        img.onload=function(){
            ctx.drawImage(img,0,0,960,540);
        }
    </script>

也包含了两种img引入图片方式。

需要给图片缓冲的时间。等图片加载成功后才可以进行绘制。而drawImage这个方法 当图片在没加载完的情况下使用，他会不被调用。绘制就会失败。

参考：here

2.vscode编写canvas代码的时候不会自动补全，在定义canvas变量上添加注解：

/** @type {HTMLCanvasElement} */

即可。

 

3.canvas绘图大小总结，参考：here，here

 

4.transform矩阵变形参考：here

 

5.canvas文本绘制布局参考：here

【Over】

搜索

复制