canvas 画图板Demo

最新推荐文章于 2023-11-01 19:51:12 发布

诸葛苍穹

最新推荐文章于 2023-11-01 19:51:12 发布

阅读量1k

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/u012260672/article/details/51571290

版权

html5 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
0
评论
canvas 画图板Demo

<!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="backgroun
复制链接

扫一扫