当前位置：网站首页>H5 ＜ canvas ＞ label + native JS self-made a simple drawing tool

H5 ＜ canvas ＞ label + native JS self-made a simple drawing tool

2022-04-22 12:27:00 【Yunmo - brother Kuang's blog】

canvas Label Introduction ： Novice tutorial https://www.runoob.com/html/html5-canvas.html

<!-- * @Author: bkk * @weixin: biankuan1996 * @email: [email protected] * @Date: 2021-06-03 21:25:13 * @LastEditTime: 2021-06-03 22:30:59 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> canvas </title>
    <style> canvas {
       display: block; border: 1px solid #333; } div{
       padding: 20px 0; display: flex; justify-content: space-between; } div {
       width: 500px; } </style>
</head>

<body>
    <canvas id="myCanvas" width=500 height=500></canvas>
    <div>
        <span> Brush color ：<input type="color" id="colorBtn"></span> 
        <button class="clear"> Clear the canvas </button>
    </div>
    <script> // @type {HTMLCanvasElement} //  Get canvas object  var myCanvas = document.querySelector("#myCanvas"), clearBtn = document.getElementsByClassName("clear")[0] //  Get canvas environment  var ctx = myCanvas.getContext("2d"); var flag = false;//  Define a boolean variable to judge the state of the mouse  //  When the mouse is pressed on the canvas  myCanvas.onmousedown = function (e) {
       //  Began to draw  ctx.beginPath(); //  Define the coordinates when the mouse is pressed as the start coordinates  ctx.moveTo(e.clientX, e.clientY); //  modify flag The value of is true flag = !flag; } //  When the color selection box changes , Copy the color selected by the user to the brush color  colorBtn.onchange = function () {
       ctx.strokeStyle = this.value; } //  When the mouse slides over the canvas  myCanvas.onmousemove = function (e) {
       //  If flag == true That is, when the mouse is pressed, perform the following operations  if (flag) {
       ctx.lineTo(e.clientX, e.clientY) ctx.stroke(); } } //  When the mouse is released  myCanvas.onmouseup = function (e) {
       //  When the mouse is released ,flag Restore to the initial value  flag = !flag; } //  Clear the canvas  clearBtn.onclick = function () {
       //  Define that the eraser is the same width and height as the canvas  ctx.clearRect(0, 0, 500, 500) } </script>
</body>

</html>

版权声明
本文为[Yunmo - brother Kuang's blog]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204221225118146.html

边栏推荐

猜你喜欢

随机推荐