zoukankan      html  css  js  c++  java
  • canvas 动态画线

    <!--
    实现鼠标按下的时候,移动进行绘制,鼠标抬起结束绘图,
    用到的事件有mousedown mousemove mouseup
    用的的canvas api 有 beginPath moveTo lineTo stroke

    涉及到了内容有dom标签canvas 事件和canvas的api
    -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>canvas</title>
    </head>
    <body>
    <!--设置canvas画布-->
    <canvas id="canvas" width="1920" height="1080"></canvas>
    <script>
    // 加载onload事件,页面启动就进行画图
    window.onload = drawImage();
    // 画图函数
    function drawImage(){
    // 获取canvas这个dom元素
    var canvas = document.getElementById('canvas');
    // 获取上下文环境
    var ctx = canvas.getContext('2d');
    // 鼠标按下获取事件的坐标点
    canvas.onmousedown = function(e){
    var x = e.layerX;
    var y = e.layerY;
    console.log(x+"----"+y);
    // 开始画图,beginPath 实际的功能是清除缓存
    ctx.beginPath();
    // 移动到开始点
    ctx.moveTo(x,y);
    // 鼠标移动开始画图
    canvas.onmousemove= function (e1) {
    var ex = e1.layerX;
    var ey = e1.layerY;
    console.log("ex"+ex+"ey"+ey);
    // 移动到的点
    ctx.lineTo(ex,ey);
    // 告诉画笔开始画图了
    ctx.stroke();
    };
    // 鼠标抬起时结束画图
    canvas.onmouseup=function () {
    canvas.onmousemove = null;
    canvas.onmouseup = null;
    };
    };
    }
    </script>
    </body>
    </html>
  • 相关阅读:
    $Noip2011/Luogu1311$ 选择客栈
    $Noip2013/Luogu1970$ 花匠 $dp$+思维
    $CF1063B Labyrinth$ $01$最短路/$01BFS$
    $UVA10559 Blocks $区间$dp$
    $SCOI2009 windy$数 数位$dp$
    $cometoj#4 D $求和 不是$dp$
    Manacher算法总结
    题解 P1537 【弹珠】
    题解 P4609 【[FJOI2016]建筑师】
    字符串专题随笔
  • 原文地址:https://www.cnblogs.com/jinling/p/6168722.html
Copyright © 2011-2022 走看看