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

canvas 动态画线的更多相关文章

  1. OpenGL进阶演示样例1——动态画线(虚线、实线、颜色、速度等)

            用OpenGL动态绘制线段.事实上非常easy,但到如今为止.网上可參考资料并不多. 于是亲自己主动手写一个函数,方便动态绘制线段.代码例如以下: #include<GL/glu ...

  2. 第五讲:使用html5中的canvas动态画出物理学上平抛运动

    <html> <head> <title>平抛运动</title> <script src="../js/jscex.jscexRequ ...

  3. html5使用canvas动态画医学设备毫秒级数据波形图

  4. HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. VC动态轨迹画线

    分类: 2.4 线程/图形学2010-04-30 22:14 1878人阅读 评论(0) 收藏 举报 文档null 这是一个绘制直线的简单绘图程序,能过实现动态轨迹画线,在拖动时产生临时线来表示可能画 ...

  6. 兼容IE浏览器的canvas画线和圆圈

    1.新建test.html文件,代码如下: <!DOCTYPE html><html><head>    <meta charset="utf-8& ...

  7. Android中Path类的lineTo方法和quadTo方法画线的区别

    转载:http://blog.csdn.net/stevenhu_223/article/details/9229337 当我们需要在屏幕上形成画线时,Path类的应用是必不可少的,而Path类的li ...

  8. C#使用 DirectX SDK 9做视频播放器 并在视频画线添加文字 VMR9

    视频图像处理系列 索引 VS2013下测试通过. 在百度中搜索关键字“DirectX SDk”,或者进入微软官网https://www.microsoft.com/en-us/download/det ...

  9. 用CSS3和Canvas来画网格

    我们经常使用一些excel表格来处理数据,在html中,我们可以用table来制成表格.今天来看一下一些不同的方法. 方法一:使用CSS3的background的linear-gradient属性 l ...

随机推荐

  1. 今年暑假不AC[HDU2037]

    今年暑假不AC Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  2. [Arduino] Arduino Uno R3 中文介绍

    Arduino UNO是Arduino USB接口系列的最新版本,作为Arduino平台的参考标准模板.UNO的处理器核心是ATmega328,同时具有14路数字输入/输出口(其中6路可作为PWM输出 ...

  3. MFC可执行文件问题

    MFC生成的.exe可执行文件,在其它机子上无法正常执行.主要是MFC库链接方式的问题,使用MFC分动态连接和静态连接两种:   静态连接就是把需要的MFC库函数放进你的exe之中,这样,在MFC库函 ...

  4. 单Js 的重力游戏开发

    最近在用看cocos的时候萌生的想法,单纯js实现重力原理.然后就做了一个这样的小游戏.姑且命名为<超级玛丽>! 因为之前有人要我做超级玛丽.哈哈哈哈哈哈!这也算完成任务了吧. 先说一下原 ...

  5. angularjs中使用轮播图指令swiper

    我们在angualrjs移动开发中遇到轮播图的功能 安装 swiper  npm install --save swiper   或者 bower install --save swiper 引入文件 ...

  6. 【Java学习笔记之六】java三种循环(for,while,do......while)的使用方法及区别

    第一种:for循环 循环结构for语句的格式:       for(初始化表达式;条件表达式;循环后的操作表达式) { 循环体;    } eg: class Dome_For2{ public st ...

  7. 这篇文章主要介绍了Citrix XenServer 6.1 安装图解教程

    本次为使用VirtualBox虚拟机过安装测试机过程,我们在使用Vm(无论是Vbox还是VMware等)我们的CPU都必须可支持Intel-V或AMD-V,并且在VM软件设置和BIOS设置开启虚拟化支 ...

  8. servlet运行原理

  9. MATLAB中mesh函数的使用:基于像素强度画3D密度图(create a 3D density plot based on the pixel intensity:mesh function)

    所用的函数非常简单,只需要用到mesh函数,示例代码如下: Ima=imread('F:\pathto\test.jpg'); surf_ima = surf(rgb2gray(Ima)); %黑色的 ...

  10. python(十一)面向切面编程AOP和装饰器

    二.装饰器 装饰器可以在给函数修改功能的同时并不改变这个函数本身.(以下用的都是python2.7) 首先,在python里面函数是对象,在下面的函数里"fun"是函数也是对象可以 ...