当前位置: 移动技术网 > IT编程>网页制作>CSS > 用canvas写一个简易画图工具

用canvas写一个简易画图工具

2019年11月13日  | 移动技术网IT编程  | 我要评论
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="myCanvas" width="800" height="500" s ...
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
</head>
<body>
    <canvas id="mycanvas" width="800" height="500"
    style="border:1px solid #000000;">您的浏览器不支持canvas
</canvas>
<script type="text/javascript">
    var c =document.queryselector('#mycanvas');
    // 标识画布并指明上下文
    var ctx = c.getcontext('2d');

    ctx.strokestyle = '#000';
    ctx.linewidth = 3;
    c.onmousedown = function (ev){
        ctx.beginpath();
        ctx.moveto(ev.clientx,ev.clienty)
        c.onmousemove = function (ev) {
            ctx.lineto(ev.clientx,ev.clienty);
            ctx.stroke()
        }
        c.onmouseup = function () {
            c.onmousemove = null;
        }
    }
</script>

</body>
</html>

 

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网