canvas 鼠标划线

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>canvas</title>

<style>

body{background: #000;}

#c1{background: #fff;}

</style>

<script>

window.onload = function(){

var oc = document.getElementById(‘c1‘);

var ogc = oc.getContext(‘2d‘);

oc.onmousedown = function(ev){

var ev = ev || window.event;

ogc.moveTo(ev.clientX-oc.offsetLeft,ev.clientY-oc.offsetTop);

document.onmousemove=function(ev){

var ev = ev || window.event;

ogc.lineTo(ev.clientX-oc.offsetLeft,ev.clientY-oc.offsetTop);

ogc.stroke();

}

document.onmouseup = function(){

document.onmousemove = null;

document.onmousedown = null;

}

}

ogc.stroke();

}

</script>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

</body>

</html>

时间: 2024-10-24 07:08:16

canvas 鼠标划线的相关文章

Matlab学习-------GUI鼠标事件响应(鼠标划线实例)

(1)打开GUIDE,添加一个坐标轴并保存 (2)添加鼠标响应事件:鼠标按下事件,鼠标运动事件,鼠标松开事件 (3)对相应事件编写程序 function varargout = guide_m(varargin) % GUIDE_M MATLAB code for guide_m.fig % GUIDE_M, by itself, creates a new GUIDE_M or raises the existing % singleton*. % % H = GUIDE_M returns

canvas 鼠标画线

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cavans 鼠标画线</title> <style> #canvas{ background: orange; } </style> </head> <body> <canvas id="ca

html5的canvas鼠标点击画圆

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="K

canvas 鼠标绘图

项目要求在视频上绘制多边形区域 单单描出鼠标轨迹很简单,lineTo 配合鼠标事件大概十几行代码就搞定 画直线的话原来是要在 mousemove 里清空画布,鼠标移动时都在不断地清空画布再重新根据起点终点来绘制 如此"曲折"才得到了一条直线,因为不断地 clearRect,所以要画多条直线就要记录以前画过的直线,试过用数组来记录,但感觉极其麻烦没有可行性 看了 创建一个HTML5 Canvas绘画应用程序 后才恍然大悟,原来要用到两张画布,一张用于临时绘制,一张用于记录,每在临时画布上

html5 canvas 鼠标绘制

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> body{ background:pink; } #c1{ background:white; } </style> <script> window.onload = function () { var oC = do

Canvas鼠标点击特效(富强、民主...)、收藏

<script> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("?富强?","?民主?","?文明?","?和谐?","?自由?","?平等?","?公正?",

10种canvas鼠标光标动画特效

来源:http://www.sucaihuo.com/js/1780.html demo:http://www.sucaihuo.com/jquery/17/1780/demo/

HTML canvas原生js实现鼠标画图

效果展示: 查看效果可点击下载源文件 http://i.cnblogs.com/Files.aspx html完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

HTML5 canvas 在线画笔绘图工具(二)

Canvas+Javascript 带图标的工具条制作 TToolbar 工具条是由一个TToolbar对象和两个按钮对象(TImageButton.TColorButton)组成,因为之前我大部分时间是使用d.e.l.p.h.i进行开发,所以命名方面比较偏向于d.e.l.p.h.i的风格,请处女座的同学忍耐将就一下. 图标按钮 TImageButton TImageButton 是一个图标按钮对象,可以设置三个图标文件,分别是正常状态,鼠标移上状态,鼠标点击状态. 下面我们介绍一下TImage