HTML5 自由画布

最新推荐文章于 2024-07-12 11:14:49 发布

冷小鱼

最新推荐文章于 2024-07-12 11:14:49 发布

阅读量1.6k

点赞数 1

分类专栏： JavaScript 文章标签： H5

本文链接：https://blog.csdn.net/yanxilou/article/details/82980355

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

笔者基于html5技术，使用Canvas实现画布

1、js库下载

Jquery：http://jquery.com/download/

Jcanvas：https://github.com/caleb531/jcanvas/releases 解压后找到 jcanvas-21.0.1\dist\min 目录下的否复制

Jscolor ：http://jscolor.com/download/

2、先上代码，后续在更新

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <script type="text/javascript"  src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript"  src="jcanvas.min.js"></script>
    <script type="text/javascript"  src="jcanvas-crescents.min.js"></script>
    <script type="text/javascript"  src="jcanvas-donuts.min.js"></script>
    <script type="text/javascript"  src="jcanvas-ext.js"></script>
    <script type="text/javascript"  src="jcanvas-handles.min.js"></script>
    <script type="text/javascript"  src="jcanvas-hearts.min.js"></script>
    <script type="text/javascript"  src="jscolor.js"></script>
    <script type="text/javascript">
    function drawPen(){
        var color= "#"+$("#color").val();
        var width=$("#penWidth option:selected").text();
        CanvasExt.drawPen("can",color,width);
        refresh();
    }
    function refresh(){
        var c=document.getElementById("can");
        var cxt=c.getContext("2d");
        var img=new Image()
        img.src="bz.png"
        img.onload = function(){cxt.drawImage(img,0,0)}
    }
    </script> 
</head>
<body> 
    <div>
        <input type="button"  value="自由画笔" onclick="drawPen()"/>
        <div>
            
            Color: <input id="color" class="jscolor" value="ab2567" onchange="changePenColor()">
        </div>
        <div>
            选择画笔宽度： 
            <select id="penWidth" onchange="changePenWidth()">
                <option>2</option>
                <option>4</option>
                <option>6</option>
                <option>8</option>
            </select>
        </div>
            <canvas id="can" width="800" height="600" style="border:1px solid #999;" >您的浏览器不支持canvas画图功能，推荐使用Google浏览器!</canvas>
    </div>
       
</body>
</html>

3、效果图