HTML5、JS使用canvas绘画

2021 年 11 月 01 日

867 次浏览

2781字数

<h2>canvas属性</h2><p>HTML5 canvas 元素用于图形的绘制，通过JavaScript来完成.<br> canvas 标签只是图形容器，您必须使用脚本来绘制图形。<br> 你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。</p><h2>使用canvas绘画一条直线</h2><p><img src="https://www.xxhzm.cn/usr/uploads/2021/11/1803021975.png" alt="2.png" title="2.png"style=""></p><pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;script&gt;
        window.onload = function() {
            let canvas = document.querySelector('canvas'); //获取canvas对象

let ctx = canvas.getContext('2d'); //创建一个画布

ctx.beginPath(); //开始新的一条路径

ctx.moveTo(100, 100); //起始地点

ctx.lineTo(400, 100); //结束地点

ctx.stroke(); //着色

ctx.closePath(); //结束路径
        }
    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;canvas width=&quot;500px&quot; height=&quot;500px&quot;&gt;
        您的浏览器版本过低，请升级浏览器或者使用chrome打开&lt;!--在低版本的情况下例如ie7的时候会把canvas当成一个标签输出里面的内容--&gt;
    &lt;/canvas&gt;
&lt;/body&gt;

&lt;/html&gt;

</code></pre><h2>使用canvas画一个矩形</h2><p><img src="https://www.xxhzm.cn/usr/uploads/2021/11/2202273191.png" alt="1.png" title="1.png"style=""></p><pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style&gt;
        canvas {
            border: 1px solid #000;
        }
    &lt;/style&gt;
    &lt;script&gt;
        window.onload = function() {
            let canvas = document.querySelector('canvas');
            let ctx = canvas.getContext('2d');

//上边横长线
            ctx.beginPath();
            ctx.moveTo(400, 100);
            ctx.lineTo(100, 100);
            ctx.strokeStyle = &quot;red&quot;;//设置颜色可以为16进制、rgba、英文
            ctx.lineWidth = 8;//线宽
            ctx.stroke();

//左边竖长线
            ctx.moveTo(100, 100);
            ctx.lineTo(100, 400);
            ctx.strokeStyle = &quot;skyblue&quot;;
            ctx.lineWidth = 8;
            ctx.stroke();

//下边横长线
            ctx.moveTo(100, 400);
            ctx.lineTo(400, 400);
            ctx.strokeStyle = &quot;yellow&quot;;
            ctx.linewidth = 8;
            ctx.stroke();

//右边竖长线
            ctx.moveTo(400, 400);
            ctx.lineTo(400, 100);
            ctx.strokeStyle = &quot;red&quot;;
            ctx.linewidth = 8;
            ctx.stroke();
            ctx.closePath();
        }
    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;canvas width=&quot;500px&quot; height=&quot;500px&quot;&gt;&lt;/canvas&gt;
&lt;/body&gt;

&lt;/html&gt;

</code></pre><p>写的有些重复，后面会更新function传值写法</p>