创建一个绘画板

来源：互联网发布：淘宝店铺租用协议编辑：程序博客网时间：2024/05/06 07:48

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

<!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 0