有关Canvas的一点小事--鼠标绘图
1、 如何根据鼠标位置获取canvas上对应位置的x,y。
2、 canvas的图糊了，设置宽和高的方式不对。
3、鼠标绘图代码
之前听说过canvas这个元素，但是实际上并没有深入了解过。不过日前有个项目一是使用canvas显示dicom格式的医疗影像，一是利用canvas元素生成图像压缩包，将之前对canvas隐隐约约的好奇心被无限放大，那就尝试做一个用鼠标绘制图像的画布吧。这不难，网上一搜都是教程，然而……很多事情好像并不像想象的美好。
要做的很简单，mousedown的时候设置开始作画的标签，开始作画后就开始捕捉mousemove的轨迹来作画，mouseup的时候停止（后面附完整代码）。
1、 如何根据鼠标位置获取canvas上对应位置的x,y
然而，无论使用offsetX,offsetY还是clientX-canvas.width，clientY-canvas.height都获取不到对应的x，y，我甚至找不到鼠标落下的点和鼠标位置的任何关系。我知道这应该跟canvas的拉伸有关，之前就有遇到过需要调整canvas大小后图像出问题的问题，然而网上很多代码都是直接使用这两个值，都是大忽悠，但是我对canvas没有一点了解，完全不知道如何转换，幸亏后来找到合适的方法。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//********尝试获得对应位置的x,y
c.addEventListener('click',function(event){
var event = event||window.event;
var bbox = c.getBoundingClientRect();
var x = event.offsetX * (c.width / bbox.width);
var y = event.offsetY * (c.height / bbox.height);
ctx.beginPath();
ctx.arc(x,y,10,0,2*Math.PI);
ctx.stroke();
});
2、 图糊了，如何设置宽和高。
一开始我是把canvas当作普通元素处理，那么设置宽和高不就是,：
#myCanvas{
width:800px;
height:600px;
}
然后图糊了，下图不太明显，但是在网页中的确不能看。
然后我就知道了canvas要设置的是像素值，不是简单的宽和高，设置方法有下面两种：
<1>行内设置属性
<canvas id="myCanvas" width="800" height="500"></canvas>
<2>js设置属性
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
c.width=800;
c.height=600;
3、鼠标绘图代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8"/>
<script src='js/jquery-3.3.1.min.js'></script>
<style>
body{
background:black;
text-align:center;
}
#myCanvas{
margin:10px auto;
background:white;
} </style>
</head>
<body>
<canvas id="myCanvas"></canvas> <script type="text/javascript">
$(document).ready(function(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
c.width=800;
c.height=600; var tempx = -1, tempy = -1;
function painting(event){
var event = event||window.event; /*获取宽和高*/
var bbox = c.getBoundingClientRect();
var x = event.offsetX * (c.width / bbox.width);
var y = event.offsetY * (c.height / bbox.height); /*画线*/
ctx.beginPath();
ctx.moveTo(tempx, tempy);
ctx.lineTo(x, y);
ctx.stroke();
ctx.closePath();
/*存值*/
tempx = x;
tempy = y;
}
c.onmousedown = function(event){
var event = event||window.event;
var bbox = c.getBoundingClientRect();
/*存初值*/
tempx=event.offsetX * (c.width / bbox.width);
tempy=event.offsetY * (c.height / bbox.height);
/*开始作画*/
c.onmousemove = painting;
};
c.onmouseup = function(event){
c.onmousemove = null;
}; });
/********* **********/ </script>
</body>
</html>
还可以做：
1、shift绘制图像直线，根据shiftKey绘制，下有实现，不过不太灵敏，不够符合理想的状态
2、橡皮擦，和清除全部图像，使用
context.clearRect(0, 0, canvas.width, canvas.height);
3、画圆画矩形，拖动会更改大小，这个涉及的细节更多了
圆形：
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
矩形：
ctx.fillRect(0,0,150,75);
4、设置颜色选择、更改画笔粗细（可以使用正方形代替线，不过好像不太对劲）
ctx.fillStyle="#FF0000";
5、添加文字
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
6、历史画笔，返回恢复
保存好进行过的操作
7、保存下载图片
下文再进行讨论
这些事件要考虑的细节问题太多，就懒得写代码调整尝试了，下面是添加了shift操作并做了一些优化的代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8"/>
<script src='js/jquery-3.3.1.min.js'></script>
<style>
body{
background:black;
text-align:center;
}
#myCanvas{
margin:10px auto;
background:white;
} </style>
</head>
<body>
<canvas id="myCanvas"></canvas> <script type="text/javascript">
$(document).ready(function(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
c.width=800;
c.height=600; var tempx = -1, tempy = -1;
var shiftline=-1.0,shiftx=-1,shifty=-1;/*shift画直线，因为x,y太快捕捉不到角度，另起一个shiftx,shifty来储存*/
//*******用鼠标画线
function paintingLine(event){
var event = event||window.event; //*******获取宽和高
var bbox = c.getBoundingClientRect();
var x = event.offsetX * (c.width / bbox.width);
var y = event.offsetY * (c.height / bbox.height);
//********shift
var shiftKey = event.shiftKey;
if(shiftKey==true){
if(shiftline==-1.0){
if(shiftx==-1){
shiftx = tempx;
shifty = tempy;
}
if(timer==3){
if(x-shiftx==0){
shiftline = -2.0;
}
else{
shiftline = (y-shifty)*1.0/(x-shiftx);
} }
timer = timer+1; }
else{
if(shiftline==-2.0){
x = 0;
}
else{
y = shifty+(x-shiftx) * shiftline;
}
} }
else{
shiftline = -1.0;
shiftx = -1;
shifty = -1;
timer = 0;
}
//**********画线
ctx.beginPath();
ctx.moveTo(tempx, tempy);
ctx.lineTo(x, y);
ctx.stroke();
ctx.closePath();
//**********存值
tempx = x;
tempy = y;
}
//******按下鼠标开始画线
c.onmousedown = function(event){
var event = event||window.event;
var bbox = c.getBoundingClientRect();
//*********存初值
tempx=event.offsetX * (c.width / bbox.width);
tempy=event.offsetY * (c.height / bbox.height);
//*******开始作画
c.onmousemove = paintingLine;
};
//**********松开鼠标键停止作画
c.onmouseup = function(event){
c.onmousemove = null;
shiftline = -1.0;
shiftx = -1;
shifty = -1;
timer = 0;
};
//**********离开界面停止作画
c.onmouseout = function(event){
c.onmousemove = null;
shiftline = -1.0;
shiftx = -1;
shifty = -1;
timer = 0;
}; });
/*********
还可以做：
1、shift绘制图像直线，根据shiftKey绘制，上面有实现，不过不太灵敏，不够符合理想的状态
2、橡皮擦，和清除全部图像，使用
context.clearRect(0, 0, canvas.width, canvas.height);
3、画圆画矩形，拖动会更改大小，这个涉及的细节更多了
圆形：
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
矩形：
ctx.fillRect(0,0,150,75);
4、设置颜色选择、更改画笔粗细（可以使用正方形代替线，不过好像不太对劲）
ctx.fillStyle="#FF0000";
5、添加文字
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
6、历史画笔，返回恢复
保存好进行过的操作
7、保存下载图片
下文再进行讨论
这些事件要考虑的细节问题太多，就懒得写代码调整尝试了
**********/ </script>
</body>
</html>
前端鼠标绘图代码
参考：
获取鼠标位置和canvas的对应xy：https://blog.csdn.net/u010513756/article/details/47363743
有关Canvas的一点小事--鼠标绘图的更多相关文章
- 有关Canvas的一点小事—图像绘制
1. 使用canvas绘制图像 什么是图像?在js中它就是一个<img src=””>,<img>有两种接收图像信息的方法,一个是直接链接到图像地址,一个使用base64数据 ...
- 有关Canvas的一点小事—canvas和resize
之前就说了canvas设置大小的时候用的就是设置实打实的像素值,像图像一样设置百分比然后根据浏览器大小自己适应大小是不可能的——当然一般也不会想要cavans改变大小.不过项目之前有用到过,既然去了 ...
- 有关Canvas的一点小事—canvas数据和像素点
1. canvas生成base64数据 canvas.toDataURL()生成的数据可以直接给image对象使用作为<img>显示在前端,也可以传给后台生成图片保存.前端生成保存图片的 ...
- 【CITE】利用鼠标绘图C#
实例018 利用鼠标绘图 光盘位置:光盘\MR\01\018 在常用的画图软件中,用户一般都可以通过鼠标在其中绘图,那么该功能是如何实现的呢?本实例将讲解如何使用C#实现通过拖动鼠标在窗体上绘图的功能 ...
- C语言实现鼠标绘图
使用C语言+EGE图形库(Easy Graphics Engine).思路是通过不断绘制直线来实现鼠标绘图的功能,前一个时刻鼠标的坐标作为直线的起点,现在时刻的坐标作为终点(严格意义是线段而不是直线) ...
- 61.H5---利用canvas+原生js进行鼠标跟随绘图
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- 用html5的canvas和JavaScript创建一个绘图程序
本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...
- 原生js实现Canvas实现拖拽式绘图，支持画笔、线条、箭头、三角形和圆形等等图形绘制功能，有实例Demo
前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 演示地址:查看演示DEMO 新版本支持IE5+(你没看错,就是某软的IE浏览器)以上任意浏览器的Canvas绘图:htt ...
- html5 canvas常用api总结(二)--绘图API
canvas可以绘制出很多奇妙的样式和美丽的效果,通过几个简单的api就可以在画布上呈现出千变万化的效果,还可以制作网页游戏,接下来就总结一下和绘图有关的API. 绘画的时候canvas相当于画布,而 ...
随机推荐
- cf 864 F. Cities Excursions
F. Cities Excursions There are n cities in Berland. Some pairs of them are connected with m directed ...
- Codefroces432 div2 A,B,C
A. Arpa and a research in Mexican wave Arpa is researching the Mexican wave. There are n spectators ...
- JS取出两个数组的不同或相同元素
JS合并两个数组的方法 我们在项目过程中,有时候会遇到需要将两个数组合并成为一个的情况.比如: var a = [1,2,3]; var b = [4,5,6]; 有两个数组a.b,需求是将两个数组合 ...
- tensorflow学习之路---简单的代码
import numpyimport tensorflow as tf #自己创建的数据x_data = numpy.random.rand(100).astype(numpy.float32)#创建 ...
- 【VC++学习笔记四】MFC应用程序中框架类的获取
一.文档类中 获取视图: 先获取主窗体,在根据主窗体获取视图 pMain->GetActiveDocument();注意类型转换 由于文档中可能包含多个视图,可以按照下面函数获取: CView* ...
- EditPlus 使用技巧以及快捷键
一边阅读,一边动手吧! 为了达到更好的效果,请你先下载我打包的这个 EditPlus压缩包文件(压缩包文件为绿色的EditPlus2.31英文版,含自动完成文件,高亮语法文件和剪切板代码片断文件,这些 ...
- 洛谷 P2558 [AHOI2002]网络传输
P2558 [AHOI2002]网络传输 题目描述 在计算机网络中所有数据都是以二进制形式来传输的. 但是在进行较大数据的传输时,直接使用该数的二进制形式加以传输则往往传输的位数过多. 譬如要传输 1 ...
- Linux监控（OS，MySQL，Tomcat，Apache）
关于逐步脱离开发岗位的意见,老大已经批准了,接下来我的主要工作就是"运维+数据库管理".感谢杰民兄和小马哥能接受我的骚扰.接下来还会去骚扰他们,同一时候也会去骚扰董大爷,小刚总,心 ...
- jQuery源码05 (3653 , 3797) queue() : 队列方法 : 执行顺序的管理
//对外接口 jQuery.extend({ queue: function( elem, type, data ) {//入队.元素.队列名字.存进去的函数 //jQuery.queue( this ...
- TCP连接状态详解
tcp状态: LISTEN:侦听来自远方的TCP端口的连接请求 SYN-SENT:再发送连接请求后等待匹配的连接请求 SYN-RECEIVED:再收到和发送一个连接请求后等待对方对连接请求的确认 ES ...