使用canvas写出一个写字板

xuyanzhe_98

于 2019-07-19 14:04:57 发布

阅读量291

点赞数

分类专栏： js canvas 文章标签： canvas 写字板原生js

本文链接：https://blog.csdn.net/Xxxcxyz/article/details/96479383

版权

js 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

canvas

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #pic{
        background-color:black;
    }
    </style>
</head>
<body>
    <!-- canvas的长度宽度不要在style里设置 最好在canvas标签内设置 -->
    <canvas id="pic" width="500px" height="300px"></canvas>
    <script>
    var pic = document.getElementById("pic");
    var context =pic.getContext("2d");
    pic.ontouchstart= function(e){
        // 获取当前鼠标点击的坐标
        var thisX = e.changedTouches[0].clientX;
        var thisY = e.changedTouches[0].clientY;
        context.beginPath();
        context.moveTo(thisX,thisY);
        context.lineWidth = 3;
        context.strokeStyle = "white";
}
    pic.ontouchmove = function(e){
        var thisX = e.changedTouches[0].clientX;
        var thisY = e.changedTouches[0].clientY;
        context.lineTo(thisX,thisY);
        context.stroke();
    }
    </script>
</body>
</html>