Canvas:橡皮筋线条绘制
Canvas:橡皮筋线条绘制
效果演示
实现要点
事件监听
【说明】:
在Canvas中检测鼠标事件是非常简单的,可以在canvas中添加一个事件监听器,当事件发生时,浏览器就会调用这个监听器。
我们可以使用绑定事件属性:
canvas.onmousedown = function(e)
{
//.....
}
此外,也可以使用更为通用的addEventListener()方法来注册监听器:
canvas.addEventListener('mousedown',function(e){
//.....
})
注意:使用onmouseXXX更为简单,但是addEventListener()可以向某个事件注册多个监听器。
鼠标坐标转换为canvas坐标
【说明】
浏览器通过事件对象传递给监听器的鼠标坐标,是窗口坐标,而不是相对于canvas自身的坐标。大部分情况下,我们需要知道的是发生鼠标事件的点相对于canvas的位置,而不是在整个窗口中的坐标,所以必须进行坐标转换。
【实例】:转换代码
function windowToCanvas(x, y) {
var bbox = canvas.getBoundingClientRect();
return {
x: (x - bbox.left)*(canvas.width / bbox.width),
y: (y - bbox.top)*(canvas.height / bbox.height)
};
}
注意:为什么最后要乘(canvas.width / bbox.width),我们简单说明一下,canvas存在元素大小与绘图表面大小两套尺寸,我们的图像是显示在绘图表面上的,但是如果canvas元素大小较大的话,浏览器就会对绘图表面上的图像进行缩放以适应canvas元素大小,我们要避免这种缩放就要除去缩放比例。
我们用element表示canvas元素,用canvas表示绘图表面,src表示绘制的内容,dest表示展示的内容
缩放规则为:dest.size = src.size * (element.size / canvas.size)
所以,src=dest.size*(canvas.size/element.size)
绘制表面的保存与恢复
【说明】:
使用getImageData与putImageData方法来保存与恢复绘图环境的绘图表面数据。
【实例】:保存和恢复数据
function saveDrawingSurface() {
drawingSurfaceImageData = context.getImageData(0, 0, canvas.width, canvas.height);
} function restoreDrawingSurface() {
context.putImageData(drawingSurfaceImageData, 0, 0);
}
实现代码
<canvas id="canvas">
</canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var drawingSufraceData;
var mousedown ={};
var dragging = false; //绝对坐标转相对坐标
function windowToCanvas(x, y) {
var bbox = canvas.getBoundingClientRect();
return {
x: (x - bbox.left)* (canvas.width / bbox.width),
y: (y - bbox.top)* (canvas.height / bbox.height)
};
} //绘图表面的保存与恢复
function saveDrawingSurface()
{
drawingSufraceData = context.getImageData(0,0,canvas.width,canvas.height);
}
function restoreDrawingSurface()
{
context.putImageData(drawingSufraceData,0,0);
} function drawingLine(loc)
{
context.beginPath();
context.moveTo(mousedown.x,mousedown.y);
context.lineTo(loc.x,loc.y);
context.stroke()
} //鼠标按下
canvas.onmousedown = function (e) {
mousedown = windowToCanvas(e.x,e.y);
saveDrawingSurface();
dragging =true;
} //鼠标移动
canvas.onmousemove = function (e) {
var loc = windowToCanvas(e.x,e.y);
if(dragging)
{
restoreDrawingSurface();
drawingLine(loc);
}
}
//鼠标松开
canvas.onmouseup =function (e) {
dragging=false;
}
</script>
Canvas:橡皮筋线条绘制的更多相关文章
- HTML5 Canvas ( 线段的绘制 ) beginPath, moveTo, strokeStyle, stroke
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 8-2 canvas专题-线条样式
8-2 canvas专题-线条样式 学习要点 对第五章知识进行简单的回顾和总结 进一步讲解canvas绘图相关的知识点 第八章内容介绍 在第八章中我们将对以前的知识进行简单的回顾,着重对canvas绘 ...
- canvas教程(三) 绘制曲线
经过 canvas 教程(二) 绘制直线 我们知道了 canvas 的直线是怎么绘制的 而本次是给大家带来曲线相关的绘制 绘制圆形 在 canvas 中我们可以使用 arc 方法画一个圆 contex ...
- Quartz2D简介及基本线条绘制
* Quartz2D简介 1.什么是Quartz2D? 他是一个二维的绘图引擎,同时支持iOS和Mac系统 2.Quartz2D能完成的工作 画基本线条,绘制文字,图片,截图,自定义UIView. 3 ...
- -_-#【Canvas】导出在<canvas>元素上绘制的图像
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- canvas设置线条样式
canvas设置线条样式 合法属性和方法 lineWidth = value 设置线宽 lineCap = type 设置线端点样式 lineJoin = type 设置线交合处样式 setLineD ...
- Canvas 中drawImage 绘制不出图片
在使用Canvas的drawImage绘制图片时,却发现绘制不出图片,原因是图片是异步加载,图片加载完再绘制. //html <img src="1.png" /> & ...
- canvas教程(二) 绘制直线
经过 canvas 教程(一) 简介 我们知道了 canvas 的一些基本情况 而本次是给大家带来直线的绘制 canvas 中,基本图形有两种,一种是直线,还有一种是曲线 但是无论是直线还是曲线,我们 ...
- Android中使用Canvas和Paint绘制一个安卓机器人
场景 在Android中画笔使用Paint类,画布使用Canvas类来表示. 绘图的基本步骤 首先编写一个继承自View的自定义View类,然后重写其onDraw方法,最后把自定义的view添加到ac ...
随机推荐
- 微信小程序5 - 数据驱动界面
微信小程序不可以使用js直接控制界面元素.而是通过改变 this.data中的属性,同步到界面 这个问题可以克服,带来的就是和H5不一样的编码方式.JS中更多的是改变数据的逻辑,而不是获取某个View ...
- 支付宝API接口开发相关文档以及实例
支付宝实物即时到账接口,在下载该接口之前,请确定你已经签约了即时到账的服务协议,并且账号已经开通了即时到账的权限. 口常见错误问题搜集:http://union.alipay.com/alipay/z ...
- 火狐调试js
alert("123"); //警告框显示 console.log(json); //火狐控制台显示
- Grodno 2015 (Urozero May 2015 Day 5) D Triangles
给出$P(<=10^9)$, 求有多少个有序三元组$(a, b, c),\ gcd(a, b, c) = 1,\ a + b + c <= P$且以它们构成的三角形中存在某个角是另外一个角 ...
- (转)servlet setCharacterEncoding setContentType
转自:http://blog.csdn.net/fancylovejava/article/details/7700683 编码中的setCharacterEncoding 理解 1.pageEnco ...
- markDownPad Key
邮箱: Soar360@live.com 授权秘钥: GBPduHjWfJU1mZqcPM3BikjYKF6xKhlKIys3i1MU2eJHqWGImDHzWdD6xhMNLGVpbP2M5SN6b ...
- webpack 代码拆分(按需打包)
https://segmentfault.com/a/1190000007649417
- 2、手把手教React Native实战之从React到RN
###React简介 RN是基于React设计,了解React有助于我们开发RN应用: React希望将功能分解化,让开发变得像搭积木一样,快速而且可维护 React主要有如下3个特点: *作为UI( ...
- linux DNS服务
DNS服务器的安装和配置 首先在终端输入命令#vi /etc/apt/sources.list 输入更新源 # kali repos installed by TARDIS deb http://h ...
- 面试题思考:java中快速失败(fail-fast)和安全失败(fail-safe)的区别是什么?
一:快速失败(fail—fast) 在用迭代器遍历一个集合对象时,如果遍历过程中对集合对象的内容进行了修改(增加.删除.修改),则会抛出Concurrent Modification Exceptio ...