js实现canvas在线画板

最新推荐文章于 2025-10-12 17:35:56 发布

原创

最新推荐文章于 2025-10-12 17:35:56 发布 · 3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css3

本文介绍了如何使用HTML5的Canvas标签和JavaScript来创建一个在线画板。通过JavaScript脚本绘制图形，实现画线、矩形、圆形等功能，并可调整画笔粗细，同时提供了清除画板的选项。这是一个前端开发的基础教程，旨在帮助开发者了解Canvas的基本用法。

一、前言

canvas是html5的一个新标签，属于h5的新特性，也是一个图形的容器，简单点说就是一块画布，你可以在上画矩形，圆形，折线等等，它是通过javascript来操控的，即脚本绘制图形。

二、实现效果

今天这个canvas小案例主要是四个功能

1. 画线 2. 矩形 3. 圆 4. 可以改变画笔的粗细 5.清除画板

三、代码实现

1.html+css部分代码

 <style>
        canvas{
            background-color: #ccc;
            border: 1px solid;
        }
        div{
            position:absolute;
            /* left: 300px; */
            left: 300px;

        }
    </style>
</head>
<body>
    <!-- 
    1. 画线
    2. 矩形
    3. 圆形
    4. 可以改变画笔的粗细
    -->
    <canvas width="800" height="