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>
  • 相关阅读:
    easyui tree loader用法
    mysql字符集
    mysql 内连接 左连接 右连接 外连接
    mysql 聚集函数和分组
    mysql 大数据量求平均值
    C++ 纯虚方法
    Windows xcopy
    服务端数据库的操作如何不阻塞
    分布式系统业务服务器的设计
    mysql 查询执行的流程
  • 原文地址:https://www.cnblogs.com/jinling/p/6168722.html
Copyright © 2011-2022 走看看