canvas三角形动态轨迹 5C

如何使用canvas画出三角形从一个点到展示出全部三角形的动态轨迹,麻烦给个简单的例子,谢谢。

2个回答

三角形的动态轨迹其实就是连续做三个直线的动态轨迹,这个代码可以改成任意多边形的动态轨迹。把p.push(p[0]);去掉就是任意折线的动态轨迹

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
</head>
<body>
<canvas id="canvasId" width="400" height="350"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
var p = [
    {x:200,y:50},
    {x:100,y:200},
    {x:300,y:200}
];
p.push(p[0]);
function go() {
    if (p.length>1)
        line(p[0],p[1]);
}

function line(p1,p2) {
    var vx = p2.x-p1.x, vy = p2.y-p1.y;
    var size = Math.max(Math.abs(vx),Math.abs(vy));
    vx /= size;
    vy /= size;
    var x = p1.x, y = p1.y;
    function run() {
        ctx.beginPath();
        ctx.moveTo(x,y);
        x += vx;
        y += vy;
        ctx.lineTo(x,y);
        ctx.stroke();
        if (--size>0) {
            setTimeout(run, 16);
        } else {
            p.shift();
            go();
        }
    }
    run();
}

go();

</script>
</body>
</html>


bao_yanjun
bao_yj 首先非常感谢,但是这个不是我想要的效果,我想要的是从一点引出三角形全部,是个面积的动画,我上传张图给你看看,再麻烦帮解决下,非常感谢
6 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Canvas 三角形动画轨迹
如何使用canvas画出三角形从一个点到展示出全部三角形的动态轨迹?rn网上都是球和矩形的动态轨迹实例或者更为复杂的动画,还麻烦大神给个简单的例子,谢谢。
html5 canvas室内轨迹
最近公司需要开发一个室内轨迹图,折磨了好几天,终于完成,有需要的可以下载看看,
canvas 轨迹回放
最近做的项目需要实现一个轨迹回放功能,自己没有这方面的经验,网上搜索之后也只发现了这篇文章有所提及——canvas轨迹回放,他是先搜集轨迹点,然后再回放,我的需求比较简单,轨迹点后台提供,我只需要动态画出来就行,复杂度降低了很多,主要借鉴了绘图方法——使用setInterval方法递归实现。 制作过程中发现原文章中json结构中的time...
百度地图canvas自定义轨迹
//将地图坐标转换成像素             //基本参数开始     MCBAND = [12890594.86, 8362377.87, 5591021, 3481989.83, 1678043.12, 0]     LLBAND = [75, 60, 45, 30, 15, 0]     MC2LL = [[1.410526172116255e-8, 0.000008983055
用canvas绘制三角形
function drowTriangle() { //绘制三角形 var c = document.getElementById('mycanvas') //获取画板对象 var ctx = c.getContext('2d') //获取上下文 ctx.strokeStyle = '#DF492F' //设置线条颜色 ctx.fi...
canvas之二:绘制三角形
我们当然不能满足于能在画布上画那么一条直线,接下来我们就要画一个更高级的一点的东西:三角形!同样,先上图和代码: 源代码: window.onload = function(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext(
H5 CANVAS绘图轨迹回放
最近实现了一个Canvas轨迹回放功能,产品需求:可以在图片上进行留痕操作,并且是多张图片,操作完成后数据提交到服务器,客户端获取数据后,对Canvas的操作轨迹进行回放,还原图片留痕的操作过程,并且可以配上语音进行解说。以下代码仅为Demo,实现重绘功能,业务代码比较多,就不进行分享了。 以下是回放代码,由于产品要求的时间比较紧,其中部分代码参照了网上实例,代码如下: functi
Canvas绘制星球轨迹移动
在开发在线游戏时,绘制动画是非常重要的。本节介绍一个使用Canvas API实现的动画实例——小型太阳系模型,由地球、月球和太阳组成。在漆黑的夜空中,地球围着太阳转、月球围绕地球转.p(1)定期绘图,也就是每隔一段时间就调用绘图函数进行绘图。动画当时多次绘图实现的,一次绘图只能实现静态图像。p可以使用setInterval()方法设置一个定时器,语法如下:setInterval(函数名,时间间隔)
canvas连接两点的轨迹动画
(function () { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for (var x = 0; x &amp;lt; vendors.length &amp;amp;&amp;amp; !window.requestAnimationFrame; ++x) { window.requestAn...
动态轨迹回放
就是我在实现动态轨迹回放的时候碰到点问题:rn// 依据historyPointList保存的数据来绘制小车历史路径rnCar.prototype.DrawPathByHistoryPointList = function()rn rn var temp = new Array();rn var preX ;var preY ;var curX ;var curY ;rn // 清楚原来的线对象rn ClearLines() ;rn rn //javascript事件绑定后this变义问题的解决,可以通过此方法解决rn var carObj = this.CarObj ;rn //alert(carObj) ;rn rn // 依据historyPointList绘制所有的点和线rn for(var i=0;i0)rn rn // 从pre点到cur点画线 rnrn// window.setTimeout(this.myR.createLine3(preX, preY, curX, curY, curID, curSpeed, curMileage),2000);//只执行一次rnrn rn rn // update pre pointrn preX = curX ; rn preY = curY ;rn //carObj.historyPointList.push(preX+'|'+preY) ;rnrn// setTimeout("",20000);rn rn rn // 调整小车位置rn var mapPoint = document.getElementById("myPoint"); rn tryrn rn //this.carImage.style.display = "" ; rn //this.carImage.style.left = curX ; rn //this.carImage.style.top = curY ;rn rn catch(e)rn rn //alert('LL');rn rnrnrn代码中在for循环中为什么setTimeout没有起到延时作用啊?我想实现动态的效果要怎么实现啊?rn
动态轨迹的做法
GeoGebra 是一个动态的几何软件。您可以在上面画点、向量、线段、直线、多边形、圆锥曲线,甚至是函数,事后你还可以改变它们的属性。
ArcGisEngine动态轨迹
ArcGisEngine动态轨迹,实现GPS车辆运行,作线等功能.
Canvas交互式三角形动画特效.zip
Canvas交互式三角形动画特效是一款基于canvas画布绘制鼠标滑过玻璃破碎三角形翻转背景动画特效。
canvas绘制矩形、三角形、圆形
1、绘制矩形<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas绘制矩形</title> <style> canvas{ border: 1px solid black; }
使用Canvas元素描绘三角形
moveTo的含义:将画笔移到该点的位置,然后开始绘画; lineTo的含义:将画笔从起点开始画直线,一直到终点的坐标; &lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt...
Canvas三角形碎片动画特效.zip
Canvas三角形碎片动画特效是一款基于HTML5 Canvas绘制的鼠标跟随三角形碎片光标动画特效。
HTML5 canvas飞机飞行轨迹动画.zip
HTML5 canvas飞机飞行轨迹动画代码,飞机飞行动态背景,四架飞机飞行线条轨迹动画。
动态模拟实时轨迹运行图
动态模拟实时轨迹运行图,百度地图不停绘制点经过的路线
canvas粒子流向轨迹动画.zip
canvas粒子流向轨迹动画
安卓Canvas 画图清除之前的轨迹问题
在做画图软件时发现,用canvas画时之前的图形也会加载出来,如下图:最好的解决方法为: 在canvas前加入:         m_Paint.setXfermode(new PorterDuffXfermode(Mode.CLEAR));         canvas.drawPaint(m_Paint);         m_Paint.setXfermode(new PorterD
两种方法实现动态轨迹
在GIS中,动态轨迹的实现是非常有用的,可用GPS定位,热点跟踪等。在本例中,先创建一个用于呈现动态轨迹的临时图层,并在图层上添加一个点表示位体的位置。代码如下: 复制内容到剪贴板 代码: /**//// /// 创建动态轨迹图层 /// 2008年8月7日 /// 图层表名 /// 图层名 /// 点初始坐标 /// protected void CreateTrac...
数据可视化之Echarts-lines3D动态轨迹渲染
数据可视化之Echarts-lines3D动态轨迹渲染 谈到数据可视化,不得不提到近两年超级火的ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。 ...
HTML5折线动态轨迹绘制
给出一个折线剪头,绘制出一个圆点,该圆点可以用小图标代替,如何让这个圆点沿着折线剪头的方向运动,从剪头的起点位置均匀的移动到剪头的结束位置。在HTML5页面里该实现该效果,求助大神。 rnrnHTML5, 给出两个节点(Node)坐标,用的是FoldLink,Link,还有二次折线绘制的折线剪头。 rn
canvas绘制动态机械表
html> html> head lang="en"> meta charset="UTF-8"> title>title> style> canvas { border: 1px solid red; } style> head> body> canvas width="800" height="600">c
canvas动态背景插件
断断续续好几天,终于把canvas动态背景图插件搞定了,大体总结一下要点吧。 核心简介 除了面向对象,封装,其实最核心的还是canvas转换图片的功能,该部分代码如下: //绘图 __draw(i, _width, _height, len) { let _this = this; //惰性载入 if(arguments.length) { //全屏多图切换 this.__d...
SVG & Canvas动态画矩形
SVG &amp;lt;svg style=&quot;width: 700px;height: 400px;&quot;&amp;gt; &amp;lt;rect x=&quot;20&quot; y=&quot;20&quot; width=&quot;50&quot; height=&quot;200&quot; fill=&quot;red&quot;&amp;gt; &amp;lt;animate attributeName=&quot;height&quot; fr
【canvas 动态时钟】
画一个动态时钟,显示 当前时间 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;canvas id="canvas" width="350" height="350" style="border:1px solid"&gt; Your browser does not support the canvas element. ...
动态设置canvas宽高
       在js中设置canvas的宽高时,如果用css()函数设置,或者在css样式中设置时,在绘制图像时就会出现拉伸变形的情况。这是 因为canvas的默认宽高为300px*150px,在css中设置canvas的宽高,实际上是把canvas在300px*150px的基础上进行了拉伸。所 以绘制出来的图像会发生变形。        因此,如果要动态改变canvas的大小,用以下的方式...
动态宽高canvas img
作者:LoveEmperor-王子様 html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> head> body> canvas id="myCanvas" style="border:1px solid #000000;"> canvas> body> script> // var
太极图canvas动态版
      &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;太极图&amp;lt;/title&amp;gt; &amp;lt;style type=&quot;text/css&quot;&amp;gt; #oneDiv{ display: block;
canvas动态绘制环形进度条
在做项目的过程中,遇到以下的需求:根据等级绘制环形进度条。下面把代码粘贴如下: 代码如下: var ctx = document.getElementById('radius').getContext('2d'); //画笔设置 ctx.strokeStyle = "rgba(216,216,216,100
H5——canvas——动态时钟
html5新增的画布对象可以在其中绘制任何的图形,以及线条效果,包括图片。利用canvas绘制一个动态时钟。
canvas动态绘饼图
html> html lang="en"> head> meta charset="UTF-8"> title>$Title$title> head> body> canvas id="canvas" width="800" height="600" style="border:1px solid red">canvas> div>123div> canvas id="canvas
canvas实现动态圆
function cirleShow(num) {      var canvas = $api.byId('canvas');    //画布的位置,div      context = canvas.getContext('2d');      centerX = canvas.width/2;            //圆的位置      centerY = canvas.height/2;...
canvas绘制动态电子表
电子表在线地址:点击打开链接电子时钟截图动态电子表实现思路1.利用数组绘制不规则图形  需要绘制的图形有 0 1 2 3 4 5 6 7 8 9 :  要绘制的图形数组为[0,0,1,1,1,0,0],                    [0,1,1,0,1,1,0],                    [1,1,0,0,0,1,1],                    [1,1,0,...
Canvas动态粒子连线
好久没写博客了,最近负责了公司年会的大屏签到、滚动抽奖、节目投票,整个项目做下来有惊也有喜。期间用到了Canvas制作动画,我这边就简单做了个动态粒子连线的例子与大家分享。 一、效果图如下 二、思路如下: 1.绘制随机区域的粒子,记录每个粒子x轴、y轴坐标以及x轴与y轴每次移动的距离 2.通过定时函数使得粒子进行移动,移动后判断是否超过界限,超过则将该粒子删除并生成一个新的粒子 3....
canvas画动态时钟
用canvas画动态时钟 HTML代码 &lt;body&gt; &lt;div class="box"&gt; &lt;span id="hour"&gt;&lt;/span&gt;: &lt;span id="minute"&gt;&lt;/span&gt;: &lt;span id="second"&g...
canvas动态的连线
-
canvas动态彩虹
*{margin:0; padding:0;} body{width:100%; height:100%; overflow:hidden;} #canvas{background:url(./images/img_01.gif) no-repeat center center; background-size:100% 100%;}     您的浏览器不支持canvas
canvas动态曲线
var context = document.getElementsByTagName('canvas')[0].getContext('2d'); var lastX = context.canvas.width*Math.random(); var lastY = context.canvas.height*Math.random(); var hue = 0; //绘制线条 f
相关热词 c# 线程结束时执行 c# kb mb 图片 c# 替换第几位字符 c#项目决定成败 c# 与matlab c# xml缩进 c#传感器基础 c#操作wps c# md5使用方法 c# 引用父窗口的组件