创建一个绘画板

最新推荐文章于 2023-12-18 23:24:07 发布

我是大头鸟

最新推荐文章于 2023-12-18 23:24:07 发布

阅读量457

点赞数

分类专栏： javaScript 文章标签： js canvas 绘画板

本文链接：https://blog.csdn.net/datouniao1/article/details/52104626

版权

javaScript 专栏收录该内容

61 篇文章 1 订阅

订阅专栏

创建一个绘画板主要用到时画布，和画笔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background: gray;

        }
        #c1
        {
            position: absolute;
            left:300px;
            top:50px;
            background: yellow;
        }
    </style>
    <script>
        window.onload=function(){
            var paper=document.getElementById("c1");
            var pen=paper.getContext("2d");
            var btn1=document.getElementById("btn1");
            var btn2=document.getElementById("btn2");
            var btn3=document.getElementById("btn3");
            btn1.onclick=function(){
//                alert(paper.height);
                pen.clearRect(0,0,paper.width,paper.height);//清空刚才所画的东西

            }
            btn2.onclick=function(){
                pen.lineWidth=6;//设置画笔的粗细
            }
            btn3.onclick=function()
            {
                pen.strokeStyle="red";//设置画笔的颜色
            }

            paper.onmousedown=function(ev){
                var oEven=ev||window.event;
                pen.beginPath();
                var x=oEven.clientX-300;
                var y=oEven.clientY-50;
                pen.moveTo(x,y);
                document.onmousemove=function(ev){
                    var oEv=ev||window.event;
                    var x0=oEv.clientX-300;
                    var y0=oEv.clientY-50;
                    pen.lineTo(x0,y0);
                    pen.stroke();
//                    pen.closePath();
                };

            paper.onmouseup=function(){
                document.onmousemove=null;
            }
            }
        }

    </script>
</head>
<body>
<button id="btn1">
    清空
</button>
<button id="btn2">
    加粗
</button>
<button id="btn3">
    颜色

</button>
<canvas id="c1" width="400" height="400">
</canvas>

</body>
</html>

在画板上放一个移动的矩形:

timer=setInterval(function(){
    pen.clearRect(i,i,100,100);//清空矩形
    i++;
    pen.fillRect(i,i,100,100);
    if(i>300)
    {
        clearInterval(timer);
    }
},50);

我是大头鸟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
创建一个绘画板

创建一个绘画板主要用到时画布，和画笔html>lang="en"> charset="UTF-8"> Title body{ background: gray; } #c1 { position: absolute; left:
复制链接

扫一扫

专栏目录