HTML5 canvas标签绘制正三角形 鼠标按下点为中间点,鼠标抬起点为其中一个顶点
2014-02-09 17:14
561 查看
用html5的canvas标签绘制圆、矩形比较容易,绘制三角形,坐标确定相当于前面两种难点,这里绘制的是正三角形,比较容易,我们只需要把鼠标刚按下去的点设置为三角形的中心点,鼠标抬起的点设置为三角形右边的点,再通过数学计算就可以计算出左边和顶点的坐标。
图示坐标计算的理解:
//绘制三角形 function drawPoly(num){ //设置全局变量,便于在匿名函数中使用 var startX; var startY; var endX; var endY; var distance; //获取鼠标按下事件(起始点) //鼠标按下的为三角形的中心点 canvas.onmousedown = function(evt){ var evt = window.event || evt; startX = evt.pageX - this.offsetLeft; startY = evt.pageY - this.offsetTop; //alert(startX+'-----------'+startY); } //获取鼠标抬起事件(结束点,即右下角的点) canvas.onmouseup = function(evt){ var evt = window.event || evt; //如果是IE浏览器就使用event事件,如果不是的话就使用我们传进去的参数evt endX = evt.pageX -this.offsetLeft; endY = evt.pageY - this.offsetTop; //左下角的点 y为endY var xLeft = 2*startX - endX; //y = endY //最上面的点 var B = Math.sqrt(3)*(endX-startX); //得到三角形的中间的高,根据正三角形的长直角边=sqrt(斜边的平方-短直角边的平方),运算后结果为如左边 var yTop = endY - B; //x= startX //开始绘制 ctx.beginPath(); ctx.moveTo(endX,endY); ctx.lineTo(xLeft,endY); ctx.lineTo(startX,yTop); ctx.closePath(); ctx.stroke(); } }
图示坐标计算的理解:
相关文章推荐
- 通过HTML5标签canvas绘制一个八卦图案
- HTML5 Canvas绘制跟随鼠标移动的球
- 第四讲:使用html5中的canvas标签画出一个球在指定区域内的运动
- HTML5 Canvas中实现绘制一个像素宽的细线
- html5 canvas 标签绘制图像且渐变色处理
- HTML5 Canvas中实现绘制一个像素宽的细线
- <html5 canvas>一个简单的矩形,clearRect(), strokeRect(), fillRect(), 鼠标事件onmousedown
- [原创]基于html5新标签canvas写的一个小画板
- HTML5 Canvas中实现绘制一个像素宽的细线
- HTML5教程实例-用Canvas标签绘制圆形
- HTML5 Canvas中实现绘制一个像素宽的细线
- HTML5中canvas知识点详解1-用HTML5绘制一个简单的矩形
- 【实例】html5-canvas通过鼠标绘制线段
- html5之canvas标签应用之 2d图形绘制以及图片绘制
- JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
- 使用HTML5 Canvas绘制一个时钟
- HTML5教程-用Canvas标签绘制坐标变换图形
- HTML5中的<canvas>标签绘制圣诞树
- 用顶点缓存绘制一个三角形
- html5 canvas 鼠标绘制