canvas画图：用鼠标---画曲线，直线，矩形，圆

原创 2017年06月08日 17:28:10

1292

编辑

删除

=> > flag = false; url = ''; // canvas图片的二进制格式转为dataURL格式 /* 为canvas绑定mouse事件 */ $('canvas').mousedown(function(e){ flag = true; x = e.offsetX; // 鼠标落下时的X y = e.offsetY; // 鼠标落下时的Y }).mouseup(function(e){ flag = false; url = $('canvas')[0].toDataURL(); // 每次 mouseup 都保存一次画布状态 }).mousemove(function(e){ drawXxx(e); // 绘制方法 });

1、画笔工具

{ if(flag){ ctx.lineTo(e.offsetX,e.offsetY); ctx.stroke(); // 调用绘制方法 }else{ ctx.beginPath(); ctx.moveTo(x,y); } }

2、画矩形

function drawRect(e){ if(flag){ ctx.clearRect(0,0,canvas.width,canvas.height); ctx.beginPath(); ctx.strokeRect(x,y,e.offsetX-x,e.offsetY-y); } }

3、画直线

function drawLine(e){ if(flag){ ctx.clearRect(0,0,canvas.width,canvas.height); ctx.beginPath(); ctx.moveTo(x,y); ctx.lineTo(e.offsetX,e.offsetY); ctx.stroke(); } }

4、画圆circle

function drawCircle(e){ if(flag){ ctx.clearRect(0,0,canvas.width,canvas.height); ctx.beginPath(); (e.offsetX-x)/2; var ry = (e.offsetY-y)/2; ry*ry); ctx); // 第5个参数默认是false-顺时针 ctx.stroke(); } }

但是这样，画布上只能同时有一个图形，所以需要保存画布之前的状态

{ var img = new Image(); img.src = url; ctx.drawImage(img,0,0,canvas.width,canvas.height); }

将 loadImage() 在清空画布后调用

阅读全文

版权声明：本文为博主原创文章，未经博主允许不得转载。

本文已收录于以下专栏：

相关文章推荐

HTML5 Canvas实现web画图之自由绘制矩形

该篇讲的主要是像windows附件中选择矩形框之后，可以在画布上自由绘制矩形功能的实现。...

Html5 Canvas开发之鼠标绘图和方块移动

1.鼠标绘图 无标题文档 body{ background:black;} #c1{ background:white;} span{ color:white;} window....

HTML canvas原生js实现鼠标画图

这是一篇对于当前流行的HTTML5 canvas 鼠标画图的总结

HTML5 canvas绘图基本使用方法

本文介绍了html5 中canvas标签的基本使用方法，详细讲解了其重要的属性和方法...

WPF:使用鼠标在Canvas面板上画线

使用Canvas+Line 任意画线 主要使用布局面板Canvas作为背景，通过其属性Children添加Line 来实现画线。可以理解为 每一个Line 就是一个点。 ...

canvas之一：绘制直线

canvas是html5中最激动人心的技术之一，使用它，可以在浏览器上绘制出各种酷炫的效果，但是呢，千里之行，始于足下，接下来我们就从画一条最简单的直线开始，话不多说，先上效果图： ...

canvas 鼠标移动矩形

主要实现功能是自己实现了在canvas下创建一个矩形，鼠标选中矩形框时可以拖动（矩形会变色，而且做了一点边界处理，还需要优化）。 这里对于事件的监听和解除监听我选择了用addEventListen...

<html5 canvas>一个简单的矩形，clearRect(), strokeRect(), fillRect(), 鼠标事件onmousedown

（《HTML5 Canvas核心技术 图形／动画与游戏开发》学习［1］） html5: Rectangle body{ background:#dddddd; } #canva...

HTML5 Canvas实现web画图之自由画笔

一个类似windows附件中的画图工具，是在web页面可以自由画图的。

HTML canvas原生js实现鼠标画图

这是一篇对于当前流行的HTTML5 canvas 鼠标画图的总结

qq_31164127 ＋关注

原创 56 粉丝 3 喜欢 0 码云  

他的最新文章 更多文章

前端开发：艺术字体ttf资源文件

【bootstrap】 bootstrap-modal： 点击遮罩层不关闭modal

【Vue】Vue-Router2 实现路由功能

HTML5 Canvas实现web画图之自由绘制矩形

Html5 Canvas开发之鼠标绘图和方块移动

HTML canvas原生js实现鼠标画图

HTML5 canvas绘图基本使用方法

他的热门文章

bootstrap表格内容过长时用省略号表示

3804

移动端轮播：swiper插件（触碰图片之后停止轮播）

1964

移动端开发，IOS、iPhone，表单input元素获取焦点时页面被放大的解决办法。

1643

Modal模态框的防穿透问题，模态框弹出后，禁止body滑动事件

1298

canvas画图：用鼠标---画曲线，直线，矩形，圆

1245