HTML5、JS使用canvas绘画

博主： literature
发布时间：2023 年 08 月 27 日
168 次浏览
关闭评论
1744字数
分类：主机教程

canvas属性

HTML5 canvas 元素用于图形的绘制，通过JavaScript来完成.
canvas 标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

使用canvas绘画一条直线





    
    
    
    Document

使用canvas画一个矩形





    
    
    
    Document

写的有些重复，后面会更新function传值写法

最后修改：2023 年 08 月 27 日

如果觉得我的文章对你有用，请随意赞赏

此处评论已关闭

HTML5、JS使用canvas绘画

literature • 2023 年 08 月 27 日

<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="" data-original="https://www.xxhzm.cn/usr/uploads/2021/11/1803021975.png" class="aligncenter"style=""></p><pre><code><!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        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(); //结束路径
        }
    </script>
</head>

<body>
    <canvas width="500px" height="500px">
        您的浏览器版本过低，请升级浏览器或者使用chrome打开
    </canvas>
</body>

</html>

</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="" data-original="https://www.xxhzm.cn/usr/uploads/2021/11/2202273191.png" class="aligncenter"style=""></p><pre><code><!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
    <script>
        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 = "red";//设置颜色可以为16进制、rgba、英文
            ctx.lineWidth = 8;//线宽
            ctx.stroke();

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

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

//右边竖长线
            ctx.moveTo(400, 400);
            ctx.lineTo(400, 100);
            ctx.strokeStyle = "red";
            ctx.linewidth = 8;
            ctx.stroke();
            ctx.closePath();
        }
    </script>
</head>

</html>

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

HTML5、JS使用canvas绘画

canvas属性

使用canvas绘画一条直线

使用canvas画一个矩形

live/msn等微软绝版邮箱详细的注册教程

欢迎使用 Typecho

一个功能强大又好用的RSS订阅器：FreshRSS安装教程

VPS使用BaiduPCS-Go高速下载百度网盘的文件，支持上传/离线下载等操作

使用Caddy申请免费的Let’s Encrypt泛域名SSL证书

Linux使用iptables封IP或IP段教程

VMware插入USB3.1设备时Centos报错解决方法

好看的WordPress主题：Kratos 2.5.8主题修改美化版，支持PJAX

pyLoad：一款开源、免费带Web面板的多功能下载神器

能够提升Office三件套办公效率的工具箱-星泽V社

HTML5、JS使用canvas绘画