js实现canvas在线画板

最新推荐文章于 2024-07-26 20:46:33 发布

土豆切成丝

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量2.9k

点赞数 8

分类专栏： HTML5 JavaScript 文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/a20201130/article/details/123038861

版权

一、前言

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. 可以改变

最低0.47元/天解锁文章

土豆切成丝

关注

8
点赞
踩
7

收藏

觉得还不错? 一键收藏
4
评论
js实现canvas在线画板

一、前言canvas是html5的一个新标签，属于h5的新特性，也是一个图形的容器，简单点说就是一块画布，你可以在上画矩形，圆形，折线等等，它是通过javascript来操控的，即脚本绘制图形。二、实现效果今天这个canvas小案例主要是四个功能1. 画线 2. 矩形 3. 圆 4. 可以改变画笔的粗细 5.清除画板三、代码实现1.html+css部分代码 <style> canvas{ background-colo..
复制链接

扫一扫

专栏目录