用Canvas制作简单的画图工具
今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举。
线段的绘制
如何绘制真正的1像素的线段?
如果在像素边界处绘制一条1像素宽的垂直线段,那么canvas的绘图环境对象会试着将半个像素画在边界中线的右边,将另外半个像素画在边界中线的左边。然而,在一个整像素的范围内绘制半个像素宽的线段是不可能的,,所以左右两个方向上的半像素都被扩展为1像素。如图所示
本来我们想要将线段绘制在深灰色的区域内,但实际上浏览器却将其延伸绘制到整个灰色的范围内。
如果我们将线段绘制在两个像素之间的那个像素中,这时出现的效果便成了下面图片展示的效果:
这是因为当线段绘制在两个像素之间,中间左右两端的那半个像素就不会再延伸了,它们合起来恰好占据了一个像素的宽度。
所以,如果要绘制一条真正的1像素宽的线段,必须将该线段绘制在某两个像素之间的那个像素中。
在绘制背景网格中,绘制的线段宽度为0.5像素的,这是因为所有浏览器的Canvas都实现了“抗锯齿”技术,能呈现出“亚像素”线段的绘制效果来。
背景网格的绘制代码如下:
function drawGrid(color,stepx,stepy){
context.save();
context.strokeStyle = color;
context.lineWidth = 0.5; for(var i = stepx + 0.5; i<context.canvas.width; i += stepx){
context.beginPath();
context.moveTo(i,0);
context.lineTo(i,context.canvas.height);
context.stroke();
}
for(var i = stepy + 0.5;i<context.canvas.height; i += stepy){
context.beginPath();
context.moveTo(0,i);
context.lineTo(context.canvas.width,i);
context.stroke();
}
context.restore();
}
drawGrid
坐标转换
画图的一个基本转换为将鼠标坐标转换为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)
};
}
windowToCanvas
监听事件
因为绘制图画是通过监听鼠标事件进行的,该程序用了canvas.onmousedown,canvas.onmousemove和canvas.onmouseup事件进行绘制的。
当mousedown时,记录x坐标和y坐标,设置画图标签dragging为True,并保存当前画布上所绘制的内容。
保存当前画布上的内容的函数如下:
function saveDrawingSurface(){
// getImageData() 复制画布上指定矩形的像素数据
drawingSurfaceImageData = context.getImageData(0,0,canvas.width,canvas.height);
}
saveDrawingSurface
当mousemove时,记录x坐标和y坐标,恢复在mousedown时保存的画布内容,并在此基础上绘制新的图案。
恢复画布上的内容的函数如下:
function restoreDrawingSurface(){
//通过 putImageData() 将图像数据放回画布
context.putImageData(drawingSurfaceImageData,0,0);
}
restoreDrawingSurface
当mouseup时,记录x坐标和y坐标,恢复在mousedown时保存的画布内容,并在此基础上绘制新的图案,最后将画图标签dragging设置为False。
画图
下面重点讲解一下画圆和画圆形矩形的方法。
先说画圆,画圆需要知道圆心和半径。首先利用反三角函数圆心和当前鼠标位置之间连线与X轴的夹角,然后用辅助矩阵的高度除以这个夹角的正弦值,来得出最终所画圆形的半径。
代码如下:
function drawRubberbandShapeCircle(loc){
var angle,
radius;
if(mousedown.y === loc.y){
radius = Math.abs(loc.x - mousedown.x);
}else{
angle = Math.atan(rubberbandRect.height/rubberbandRect.width);
radius = rubberbandRect.height / Math.sin(angle);
}
context.beginPath();
context.arc(mousedown.x,mousedown.y,radius,0,Math.PI*2,false);
context.stroke();
}
drawRubberbandShapeCircle
画圆形矩形用的方法是arcTo(x1,y1,x2,y2.radius),arcTo方法的参数分别代表两个点以及圆形的半径该方法以指定的半径来绘制一条圆弧,此圆弧与当前点到第一个点(x1,y1)的连线相切,而且与第一个点到第二个点(x2,y2)的连线也相切。
那么如何通过arcTo绘制出矩形呢?因为arcTo()方法绘制的可能不仅仅是一段圆弧,如果在当前路径中有子路径的话,那么浏览器会将子路径的终点与圆弧的起点用线段连起来。
在某一时刻,canvas之中只能有一条路径存在,Canvas规范将其称为“当前路径”。然而这条路径却包含许多子路径,而子路径,又是由两个或更多的点组成的。beginPath()方法会将当前路径中的所有子路径都清楚掉。
圆形矩阵的代码如下:
function roundedRect(cornerX,cornerY,width,height,cornerRadius){
context.moveTo(cornerX + cornerRadius, cornerY);
context.arcTo(cornerX + width, cornerY,cornerX + width,cornerY + height,cornerRadius);
context.arcTo(cornerX + width, cornerY + height,cornerX,cornerY + height,cornerRadius);
context.arcTo(cornerX, cornerY + height,cornerX,cornerY,cornerRadius);
context.arcTo(cornerX, cornerY,cornerX + cornerRadius,cornerY,cornerRadius);
context.stroke();
}
roundedRect
至此,画图工具就已经可以用了。
源码地址: git@github.com:weiruifeng/paint.git
用Canvas制作简单的画图工具的更多相关文章
- canvas制作简单动画
在画布元素<canvas>中,除了绘制图形.图像.文字外,还可以制作一些简单的动画,制作过程十分简单,主要分为两步操作: 1.自定义一个函数,用于图形的移动或其他动作. 2.使用setIn ...
- Black Hat Python之#1:制作简单的nc工具
nc即netcat,是网络界的瑞士军刀.当入侵了一个服务器之后,发现nc工具已经被系统管理员移除之后,可以自己制作一个简单的客户端和服务器端来实现①上传文件②执行命令③开启一个新的命令行shell等几 ...
- html5 canvas 实现简单的画图
今天早上看了一下 canvas 前端画图,数据可视化, 百度的 echart.js , d3等 js 库都已经提供了强大的绘制各种图形的 API. 下面记录一下 有关canvas 绘图的基本知识: ...
- 使用canvas制作简单表格
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 利用canvas制作简单的logo
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 用canvas写一个简易画图工具
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- canvas实例_在线画图工具
fadsfklasdjfklasjdklfjasdlk;fjasd;lfjaskl;dfjal
- 使用Canvas制作画图工具
前 言 JRedu canvas是HTML5中重要的元素之一,canvas元素使用JavaScript在网页上绘制图像,画布是一个矩形区域,我们可以控制其每一个元素,并且canvas拥有多种的绘 ...
- 使用canvas制作在线画板
canvas绘图的强大功能,让人前仆后继的去研究它.代码全部加起来不足百行.还用到了h5中的<input type="color"/>和<input type=& ...
随机推荐
- JavaScript(一)
JavaScript 是脚本语言 JavaScript 是一种可插入 HTML 页面的轻量级的编程语言,它跟Java没有什么蛋关系. JavaScript使用: <script language ...
- 【BZOJ1688】[Usaco2005 Open]Disease Manangement 疾病管理 状压DP
[BZOJ1688][Usaco2005 Open]Disease Manangement 疾病管理 Description Alas! A set of D (1 <= D <= 15) ...
- 学习Sass 的基本语法规则[Sass和compass学习笔记]
自从发现可编程的css语法 Sass和基于Sass的css库compass 一个给我的感觉像c# 另外一个给我的感觉像.NET Framework,一切都为了提升开发效率和降低开发大型web的门槛. ...
- Android -- 使用图库文件并可以裁剪文件(ImageView)
1. 本例子首先教大家如何打开图库 ,然后在使用裁剪功能,来裁剪图库里面的图片并进行显示工作
- JavaScript必须了解的知识点总结【转】
整理的知识点不全面但是很实用. 主要分三块: (1)JS代码预解析原理(包括三个段落): (2)函数相关(包括 函数传参,带参数函数的调用方式,闭包): (3)面向对象(包括 对象创建.原型链,数据类 ...
- 【转载】Linux 信号列表
转自:http://blog.csdn.net/muge0913/article/details/7322710 信号及其简介 信号是一种进程通信的方法,他应用于异步事件的处理.信号的实现是一种软中断 ...
- 访问本地json文件因跨域导致的问题
我使用jquery的getJSON的方法获取本地的json文件,并进行操作,获取json 数据代码如下: $.getJSON("invite_panel.json",functio ...
- USACO翻译:USACO 2014 US Open 三题
USACO 2014 US Open 一.题目概览 中文题目名称 牧场装饰 里程表 牛像展览 英文题目名称 decorate odometer fairphoto 可执行文件名 decorate od ...
- JAVA中的TreeSet
TreeSet简介 TreeSet是一个有序的集合,它的作用是提供一个有序的Set集合,它继承于AbstractSet抽象类实现了NavigableSet<E>, Cloneable, j ...
- 第一个python程序
一个python程序的两种执行方式: 1.第一种方式是通过python解释器: cmd->python->进入python解释器->编写python代码->回车. 2.第二种方 ...