javascript基于HTML5 canvas制作画箭头组件

样例:

废话少说,直接上代码:

arrow.js

/**
 * 实现两点间画箭头的功能
 * @author mapleque@163.com
 * @version 1.0
 * @date 2013.05.23
 */
;(function(window,document){
 if (window.mapleque==undefined)
 window.mapleque={};
 if (window.mapleque.arrow!=undefined)
 return;

 /**
 * 组件对外接口
 */
 var proc={
 /**
 * 接收canvas对象,并在此上画箭头(箭头起止点已经设置)
 * @param context
 */
 paint:function(context){paint(this,context);},
 /**
 * 设置箭头起止点
 * @param sp起点
 * @param ep终点
 * @param st强度
 */
 set:function(sp,ep,st){init(this,sp,ep,st);},
 /**
 * 设置箭头外观
 * @param args
 */
 setPara:function(args){
  this.size=args.arrow_size;//箭头大小
  this.sharp=args.arrow_sharp;//箭头锐钝
 }
 };

 var init=function(a,sp,ep,st){
 a.sp=sp;//起点
 a.ep=ep;//终点
 a.st=st;//强度
 };
 var paint=function(a,context){
 var sp=a.sp;
 var ep=a.ep;
 if (context==undefined)
  return;
 //画箭头主线
 context.beginPath();
 context.moveTo(sp.x,sp.y);
 context.lineTo(ep.x,ep.y);
 //画箭头头部
 var h=_calcH(a,sp,ep,context);
 context.moveTo(ep.x,ep.y);
 context.lineTo(h.h1.x,h.h1.y);
 context.moveTo(ep.x,ep.y);
 context.lineTo(h.h2.x,h.h2.y);
 context.stroke();
 };
 //计算头部坐标
 var _calcH=function(a,sp,ep,context){
 var theta=Math.atan((ep.x-sp.x)/(ep.y-sp.y));
 var cep=_scrollXOY(ep,-theta);
 var csp=_scrollXOY(sp,-theta);
 var ch1={x:0,y:0};
 var ch2={x:0,y:0};
 var l=cep.y-csp.y;
 ch1.x=cep.x+l*(a.sharp||0.025);
 ch1.y=cep.y-l*(a.size||0.05);
 ch2.x=cep.x-l*(a.sharp||0.025);
 ch2.y=cep.y-l*(a.size||0.05);
 var h1=_scrollXOY(ch1,theta);
 var h2=_scrollXOY(ch2,theta);
 return {
  h1:h1,
  h2:h2
  };
 };
 //旋转坐标
 var _scrollXOY=function(p,theta){
 return {
  x:p.x*Math.cos(theta)+p.y*Math.sin(theta),
  y:p.y*Math.cos(theta)-p.x*Math.sin(theta)
 };
 };

 var arrow=new Function();
 arrow.prototype=proc;
 window.mapleque.arrow=arrow;
})(window,document);

arrow.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample of the arrow</title>
<script type="text/javascript" src="./arrow.js"></script>
</head>
<body>
<canvas width=800 height=600 id="arrowLine">请使用支持HTML5的浏览器</canvas>
<script type="text/javascript">
var cont=document.getElementById("arrowLine").getContext('2d');
var a1=new window.mapleque.arrow();
a1.set({x:350,y:300},{x:200,y:200});
a1.paint(cont);
var a2=new window.mapleque.arrow();
a2.set({x:100,y:100},{x:200,y:250});
a2.paint(cont);
var a3=new window.mapleque.arrow();
a3.set({x:100,y:300},{x:150,y:150});
a3.paint(cont);
var a4=new window.mapleque.arrow();
a4.set({x:350,y:150},{x:150,y:250});
a4.setPara({
 arrow_size:0.5,
 arrow_sharp:0.5
})
a4.paint(cont);
</script>
</body>
</html>
时间: 2014-06-22

javascript html5 canvas实现可拖动省份的中国地图

本文实例分享了html5 canvas可拖动省份的中国地图实现方法,供大家参考,具体内容如下 1.数据获取 画地图需要省份边界坐标,理论上可以每次都用百度API获取数据并绘图,但为了增加效率,首先将所有坐标都获取下来并存入数据库中. 新建省份数据数组 复制代码 代码如下: var allZoneData = [{'name':'辽宁省','been':'yes','id':'01'},<span style="font-family: Arial, Helvetica, sans-seri

js+html5实现canvas绘制镂空字体文本的方法

本文实例讲述了js+html5实现canvas绘制镂空字体文本的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not s

利用HTML5的画布Canvas实现刮刮卡效果

先给大家展示效果: 查看演示   源码下载 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮卡效果. HTML 我们只需要在页面中加入canvas标签元素,其他的就看

js+html5实现canvas绘制简单矩形的方法

本文实例讲述了js+html5实现canvas绘制简单矩形的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not sup

Javascript和HTML5利用canvas构建Web五子棋游戏实现算法

这只是一个简单的JAVAscript和HTML5小程序,没有实现人机对战. 五子棋棋盘落子点对应的二维数组.数组的元素对应落子点.比如数组元素值为0表示该元素对应的落子点没有棋子,数组元素值为1表示该元素对应的落子点有白棋子,数组元素值为2表示该元素对应的落子点有黑棋子: 判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的. 判断五子棋赢棋算法 下边的函数可以实现判断五子棋赢棋的算法,也可以按照教材中相应的算法实现. 其中函数的参数xx.yy为数组下标,chess数组实现五

HTML5canvas 绘制一个圆环形的进度表示实例

HTML5 canvas 绘制圆环形进度 先看一下画出来的效果,如下图,这样一个圆环形的进度. 我这里使用HTML5的Canvas来要制作这样一个圆环形的进度, 首先是HTML页面,HTML5的文档标识是: <!DOCTYPE html> 这个文档标识要比HTML4的简单多了. 第二步,在页面上创建一个Canvas画布元素: <canvas class="process" width="48px" height="48px"&g

JavaScript+html5 canvas实现本地截图教程

最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canvas实现截图的,加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传<JavaScript File API文件上传预览>,更加觉得html5好玩了,想着也试试写写这功能权当学习canvas吧. 下面奉上我自己写的一个demo,代码写得比较少,很多细节不会处理.如果有不得当的地方恳请指教,谢谢啦 ^_^ ^_^ 功能实现步奏: 一.获取文件,读取文件并生成url 二.

PHP实现将HTML5中Canvas图像保存到服务器的方法

本文实例讲述了PHP实现将HTML5中Canvas图像保存到服务器的方法.分享给大家供大家参考.具体实现方法如下: 一.问题: 在几年前HTML5还没有流行的时候,我们的项目经理曾经向我提出这样一个需求:让项目评审专家们在评审结束时用笔在平板电脑上进行电子签名.这需要我们评审软件里提供这样一个功能:打开浏览器,登录,进入评审意见页,页面最下部有个方块区域,用户在这里用触摸笔进行签名,然后这个签名将会保持的服务器上. 这样的一个需求在当时是让我大费周折,但如今想起来,如果用html5的canvas

js+html5实现canvas绘制圆形图案的方法

本文实例讲述了js+html5实现canvas绘制圆形图案的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not sup

javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码

本文实例讲述了javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果.分享给大家供大家参考.具体如下: 下面的玫瑰绘制用到了HTML 5的canvas,所以你的浏览器需要支持HTML 5.个人还是比较推荐chrome,这个效果在Firefox下也会稍卡. 效果图: 演示地址:http://demo.jb51.net/js/2015/js-flower-canvas.html 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

纯JavaScript实现HTML5 Canvas六种特效滤镜示例

小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯JavaScript可调用的API文件gloomyfishfilter.js.支持的特效滤镜分别为: 1.反色 2.灰色调 3.模糊 4.浮雕 5.雕刻 6.镜像 滤镜原理解释: 1.反色:获取一个像素点RGB值r, g, b则新的RGB值为(255-r, 255-g, 255-b) 2.灰色调:获取一个像素点RGB值r, g, b则新的RGB值为 复制代码 代码如下: newr = (r * 0.272) + (g

javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板

js+html5 canvas实现的涂鸦画板特效,可调画笔颜色|粗细|橡皮,可以保存涂鸦效果为图片编码,非常适合学习html5的canvas,必须支持html5的浏览器才能看到效果. 复制代码 代码如下: <!doctype html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascri

javascript+HTML5 canvas绘制时钟功能示例

本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net canvas绘制时钟</title> <style> div{text-align:cent

JavaScript中常用的六种互动方法示例

1.confirm消息对话框 语法:confirm("str"); 参数说明:str为对话框中要显示的文本, 作用:通常用于提醒用户做出某些选择,其返回值为布尔类型,点击确定返回值为ture,点击取消返回值为false 例如: 复制代码 代码如下: <script type="text/javascript">     var mymessage=confirm("你喜欢JavaScript吗?");     if(mymessage

手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效

HTML5 Canvas的幸运大奖盘特效 现在好的微信微商或者微信公众号都有这种大转盘的项目,这里就整理一个,可以参考下. 这是一款基于jquery和HTML5 Canvas的幸运大奖盘特效.该幸运大奖品特效支持移动端,它通过动态构造Canvas元素来生成大奖盘,并通过jquery代码来随机获取奖品. 使用方法 HTML结构 抽奖用的大转盘使用图片来制作,开始时它们被隐藏.整个抽奖大奖盘放置在一个容器中,控制容器的大小即可以控制奖盘的大小. XML/HTML代码 <div class="c

JavaScript+html5 canvas制作的百花齐放效果完整实例

本文实例讲述了JavaScript+html5 canvas制作的百花齐放效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { border:5px solid gra

JavaScript+html5 canvas制作色彩斑斓的正方形效果

本文实例讲述了JavaScript+html5 canvas制作色彩斑斓的正方形效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>canvas中的透明度</t

JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例

本文实例讲述了JavaScript+html5 canvas绘制缤纷多彩的三角形效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { width:500px; heig

JavaScript+html5 canvas绘制的小人效果

本文实例讲述了JavaScript+html5 canvas绘制的小人效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>canvas中的缩放</tit