canvas 画图板Demo

来源：互联网发布：2016年淘宝双十一退货编辑：程序博客网时间：2024/04/27 18:31

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <title></title>    <link rel="stylesheet" href=""></head><body style="background: #000"><canvas id="cvs" width="1300" height="800" style="background: #fff"></canvas><script type="text/javascript">var cvs = document.getElementById('cvs');drawCanvas(cvs);function drawCanvas(obj) {    var  GC = obj.getContext("2d");    GC.lineWidth = 10;//设置线条宽度    GC.strokeStyle = '#f00';//设置颜色    GC.fillStyle = 'orange';    obj.onmousedown = function (ev) {    var ev = ev || window.event;    GC.moveTo(ev.clientX - obj.offsetLeft, ev.clientY - obj.offsetTop);    document.onmousemove = function (ev) {        var ev = ev || widows.event;        GC.lineTo(ev.clientX - obj.offsetLeft, ev.clientY - obj.offsetTop);        //设置边框       var str = Boolean(GC.stroke());        GC.fill();//设置填充    }}// 清除鼠标滑过的痕迹document.onmouseup = function () {    document.onmouseover = null;    document.onmouseup = null;    };}</script></body></html>

0 0