html5+javascript制作简易画板

最新推荐文章于 2023-08-01 09:09:53 发布

jiangjianANT

最新推荐文章于 2023-08-01 09:09:53 发布

阅读量4.2k

点赞数

分类专栏： javascript 文章标签： html5 javascript jquerey 画板画笔

本文链接：https://blog.csdn.net/jiangjianANT/article/details/24461987

版权

这篇博客介绍如何利用HTML5的canvas元素及JavaScript实现一个基本的在线画板功能，结合jQuery进行交互增强，用户可以在此画板上自由绘图。

摘要由CSDN通过智能技术生成

见图：

代码如下：

<!DOCTYPE html>
<html>
<meta http-equiv="content-type" Content="text/html;charset=utf-8">
<head>

    <title>简易画板</title>

    <style>
        #eraseImg{   /*橡皮样式*//**/
            border:solid;
            color:gray;
            border-radius: 118px;
            width:  5px;
            height: 5px;
            position: absolute;
            display: none;

        }
        .eraseSeries{ /*橡皮大小单选按钮组的排列，此div不单独占一行*/
            display: inline-block;
        }


    </style>
    <script src="jquery-1.7.1.js"></script>
    <script>



    var c;//获取到的2d画板
    var painting = false;//判断是否正在绘画，即鼠标左键是否长按下去
    var canvas;//画板
    $(function(){

        $(".eraseSeries").hide();//初始状态单选按钮组隐藏

        canvas=document.getElementById("myCanvas");
        c=canvas.getContext("2d");
        c.lineCap="round";//设置笔迹边角，否则笔迹会出现断层
        c.strokeStyle="black";//笔迹的颜色
        c.l