<!--
实现鼠标按下的时候,移动进行绘制,鼠标抬起结束绘图,
用到的事件有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>

随机推荐

  1. Android Studio And Gradle

    AS特色: 智能感知体验特好,堪比VS 布局预览,手写布局后预览页面即时显示,便于布局调整和优化 编辑速度飞快流畅,毫无eclipse的卡顿 布局或源码中有图标和颜色的预览,十分直观 调试时体验极佳 ...

  2. 5-Highcharts曲线图之轴反转

    <!DOCTYPE> <html lang='en'> <head> <title>5-Highcharts曲线图之轴反转</title> ...

  3. Android下HelloWorld项目的R.java文件介绍

    R.java文件介绍 HelloWorld工程中的R.java文件 package com.android.hellworld; public final class R {     public s ...

  4. 如何ios中间Safari在开发了类似的native app像全屏webapp

    本文交换了我www.gbtags.com文章. <meta name="format-detection" content="telephone=no email= ...

  5. java文件上传Demo

    说到文件上传我们要做到: 1.引入两个包:commons-fileupload-1.2.1.jar和commons-io-1.3.2.jar 2.将form改为上传文件模式:enctype=" ...

  6. UE4 多线程(一)

    UE4中使用多线程的有两种方式,一种方式就是使用FRunnable和FRunnableThread,另一种方式是Task Graph System.Task Graph System有时会占用游戏线程 ...

  7. ubuntu 的挂起与休眠

    待机 计算机将目前的运行状态等数据存放在内存,关闭硬盘.外设等设备,进入等待状态.此时内存仍然需要电力维持其数据,但整机耗电很少.恢复时计算机从内存读 出数据,回到挂起前的状态,恢复速度较快.一般笔记 ...

  8. Python面试真题答案或案例

    Python面试真题答案或案例如下: 请等待. #coding=utf-8 #1.一行代码实现1--100之和 print(sum(range(1,101))) #2.如何在一个函数内部修改全局变量 ...

  9. CheckFail设计很垃圾

        function checkFail(node, onError, fuckIE) {         var id = node.src;//检测是否死链         node.onlo ...

  10. 数据库常见索引解析(B树,B-树,B+树,B*树,位图索引,Hash索引)

    B树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right): 2.所有结点存储一个关键字: 3.非叶子结点的左指针指向小于其关键字的子树,右指针指向大于其关键字的子树: 如: B ...