H5 canvas多次重复画图后 ,位置不是第一次开始的位置

timer = window.setInterval(function () { drawLine_V0101();}, 5000);
function drawLine_V0101()
{
try
{
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas1");
//简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
if (canvas.getContext) {
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext("2d");
//圆弧的旋转角度,顺时针负增长,逆时针正增长
ctx.rotate(-8 * Math.PI / 180);
//设置弧线的颜色为蓝色
ctx.strokeStyle = "#00FFD5";
var circle = {
x: 60, //圆心的x轴坐标值
y: 60, //圆心的y轴坐标值
r: 47, //圆的半径

};

                for (var i = 1; i <10; i++)
                {//开始一个新的绘制路径

                    ctx.beginPath();
                    //圆弧的旋转角度
                    circle.x = circle.x-0.342;
                    circle.y = circle.y - 0.940;
                    //沿着坐标点(100,100)为圆心、半径为50px的圆的顺时针方向绘制弧线
                    ctx.arc(circle.x  , circle.y, circle.r,65 * Math.PI / 180, 120 * Math.PI / 180, false);
                    //按照指定的路径绘制弧线
                    ctx.stroke();
                    if (i == 1) {
                        ctx.save();
                    }
                }
                ctx.restore();//回复路径

            }


        }
        catch (e) {
            alert(e.message);
        }

    }



            <!--绘制弧线 V0101-->
<div id="huxian" style="width: 150px;height:150px;position:absolute;z-index:3; left:5.76%;bottom:29.5%">
    <canvas id="myCanvas1" style="width:150px;height:150px;border: 1px solid red;"></canvas>
</div>

1个回答

//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext("2d");
//圆弧的旋转角度,顺时针负增长,逆时针正增长

//ctx.rotate(-8 * Math.PI / 180);

上面这句话注释掉试试,不知道是不是你要的效果

cdc8596
奇点码农 大神挺牛的啊 !确实是我要的效果. 我把这个参数放到外面了,当做一个静态变量来处理就好了!旋转角度是在上次的基础上再次旋转.清空内容后但是旋转角度没有办法清空.我也是这样调出来的,采纳了哈
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
H5 canvas多次重复画图后 ,位置不是第一次开始的位置
ntimer = window.setInterval(function () drawLine_V0101();, 5000);n function drawLine_V0101()n n tryn n //获取Canvas对象(画布)n var canvas = document.getElementById("myCanvas1");n //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误n if (canvas.getContext) n //获取对应的CanvasRenderingContext2D对象(画笔)n var ctx = canvas.getContext("2d");n //圆弧的旋转角度,顺时针负增长,逆时针正增长n ctx.rotate(-8 * Math.PI / 180);n //设置弧线的颜色为蓝色n ctx.strokeStyle = "#00FFD5";n var circle = n x: 60, //圆心的x轴坐标值n y: 60, //圆心的y轴坐标值n r: 47, //圆的半径 n ;nn for (var i = 1; i <10; i++)n //开始一个新的绘制路径n n ctx.beginPath();n //圆弧的旋转角度n circle.x = circle.x-0.342;n circle.y = circle.y - 0.940;n //沿着坐标点(100,100)为圆心、半径为50px的圆的顺时针方向绘制弧线n ctx.arc(circle.x , circle.y, circle.r,65 * Math.PI / 180, 120 * Math.PI / 180, false);n //按照指定的路径绘制弧线n ctx.stroke();n if (i == 1) n ctx.save();n n n ctx.restore();//回复路径n n n n n n catch (e) n alert(e.message);n n n n n n n n n n
H5 canvas制作画图
1 概述    随着前端技术的发展,canvas使用的越累越多,而且越来越多的H5技术被应用到实际开发中,尤其是js插件更是无处不用,今天主要是分享一下如何去使用canvas在H5界面中制一个超级简单的画图工具。 2 效果图如下: 3 主要功能 支持选择画笔的颜色 支持选择画笔的线条粗细
h5 -> 获得本地位置
    &amp;lt;div id=&quot;location&quot; style=&quot;display:none&quot;&amp;gt;未知区域&amp;lt;/div&amp;gt; &amp;lt;script&amp;gt; var x=document.getElementById(&quot;location&quot;); function getLocation() { if (navigator.geolocation) { navi..
求子串在主串pos位置后第一次出现的位置
//求子串在主串pos位置后第一次出现的位置CoypeRight vivi_and_qiao #include&amp;amp;lt;stdio.h&amp;amp;gt; #include&amp;amp;lt;string.h&amp;amp;gt; int location(char *s,char *t,int pos) { //此处应该检查pos的值是否合法 int i=pos; int j=0; ...
canvas与js位置
当:js在canvas之前时无法加载 当:js在canvas之前时添加window.onload = function()正常加载 同样也可以canvas在js之前时添加正常加载
canvas的位置问题!简单
我在Panel上添加一个canvas Panel还有一些别的VCL 我希望canvas中的图形在Panel的最下层 不挡住其他VCL 应该怎么办
canvas获取鼠标位置
canvas获取鼠标位置 canvas获取鼠标位置 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta name=&quot;viewport&quot; content=&quot;width
canvas位置判断
效果图 功能点 1.百分比字幕在屏幕中间 2.百分比和圆环动态展示,互相关联 3.鼠标移入圆环时,图标变成手;移出恢复 4.鼠标移入圆环是点击,百分比暂停&amp;amp;开始动态切换 5.鼠标在圆环外无点击效果 6.鼠标在canvas内时动态显示位置 不足:鼠标点击控制圆环播放时,第一帧总是从头开始绘制,有闪烁的效果。 代码如下: &amp;lt;!doctype html&amp;g...
matlab之画图的位置
figure的位置可以通过gcf的Position来制定。 set(gcf,'position',[0,0,100,100]) 需要注意两点: - [0,0,100,100] 是按照[left bottom width height]的顺序的。第一个和第二个是指离left和离bottom的距离。 - position参数不包括图窗边框、标题栏、菜单栏和工具栏。否则可以使用OuterPo...
画图控制位置 drawimage
[code=csharp]private void panel1_Paint_1(object sender, PaintEventArgs e)rn rn Graphics g1 = e.Graphics;rn if (image != null)rn rn if (c == 0)rn rn g1.DrawImage(image, new RectangleF(groupBox2.Width, 500, image.Width, Convert.ToSingle((image.Height * sb1 * 1.0))));rn rn else if (c == 1)rn rn g1.DrawImage(image, new RectangleF(groupBox2.Width, 200, this.panel1.Width, Convert.ToSingle((image.Height * sb1 * 1.0))));rn rn rnrn if (image2 != null)rn rn if (c == 0)rn rn g1.DrawImage(image2, new RectangleF(groupBox2.Width, 400, image2.Width, Convert.ToSingle((image2.Height * sb1 * 1.0))));rn rn else if (c == 1)rn rn g1.DrawImage(image2, new RectangleF(0, this.panel1.Height / 3, this.panel1.Width, Convert.ToSingle((image2.Height * sb1 * 1.0))));rn rn rnrn if (image3 != null)rn rn if (c == 0)rn rn g1.DrawImage(image3, new RectangleF(groupBox2.Width, 700, image3.Width, Convert.ToSingle((image3.Height * sb1 * 1.0))));rn rn else if (c == 1)rn rn g1.DrawImage(image3, new RectangleF(0, this.panel1.Height / 3 * 2, this.panel1.Width, Convert.ToSingle((image3.Height * sb1 * 1.0))));rn rn rn [/code]rnrn代码如上面,但是位置不对,只有第一个设置的位置生效,第二个和第三个都和第一个挤在一起了,如何解决,什么原因?
画图的位置问题
我用的是双缓冲技术的画图,在笔记本上画出来挺好,结果文件拷到台式机里发现,界面上的图移位了(台式机显示出来的和笔记本上画出来的位置不一样了),请高手指点我该怎么办呢?
关于画图位置的问题
请问下我要在一个form下的tabcontrol中画图rn请问下那初始点怎么取呢?rn[code=C#][/code] rn[code=C#]private void button6_Click(object sender, EventArgs e)rn rn Graphics graphics = this.CreateGraphics();rn Pen myPen = new Pen(Color.Black, 1);rn int beginX =tabControl1.Location.X +50;rn int beginY = tabControl1.Location.Y + 65;rn //int height = 35;rn //int width = 50;rn Point pointX1 = new Point(beginX, beginY);rn Point pointY1 = new Point(beginX + 210, beginY);rn Point pointX2 = new Point(beginX, beginY - 45);rn Point pointY2 = new Point(beginX, beginY + 45);rn graphics.DrawLine(myPen, pointX1, pointY1);rn graphics.DrawLine(myPen, pointX2, pointY2);rn rn [/code]rn按上面的代码就是把图画在form上,被tabcontrol挡住看不见
BitBlt 画图位置不对
rn为什么用如下的函数画位图时 位图显示的位置不对rnrnpDC->BitBlt(p.x,p.y,50,50,&dcMem,0,0,SRCCOPY);
自动画图提取位置
请问这样一个用鼠标选择图的操作要怎么实现啊rn比如已知十个圆圈的坐标以及它的面积,在C#做的一个窗口里能自动生成这十个圆圈,rn然后 我在十个圆圈里人工用鼠标选择五个,右键确定,就能够按照选择的顺序输出这五个圆圈的坐标和面积。
H5 元素相对定位后不占位置
需求:一张图片上面漂浮一个图标,用来标识已经选中该图片,类似这种: &lt;div class="parentdui"&gt;&lt;i class="weui-icon-success-no-circle dui"&gt;&lt;/i&gt;&lt;/div&gt; .parentdui{ position: relative; } .dui{ position...
第一次出现的字符位置
思路:(1)建立一个数组包含128个元素,因为字符在ASCLL表中对应的整数值最大为128,而这里只有字母表示而成,故128足够用(2)首先初始化数组元素全为0(3)然后遍历整个字符串,把每个字符对应的ascll整数值对应的元素出现一次就加1 (4)然后最后从字母顺序表示的顺序遍历这个数组,第一个字母出现次数为1 的为所求class Solution { public: int First...
文件开始位置的问题
以前向大家请教:rn 一个庞大的数据文件,如何使其能存储于硬盘的连续空间内?rn或着说,如何对一个文件做碎片处理?rnrn 无人可解,现在换种方式:如何知道文件的开始簇号(FAT)?rn如何知道文件的节点号(NTFS)?rn rn 谢谢!是32位WINDOWS程序。
子窗口弹出开始位置
点击父窗口的一个按钮,弹出一个子窗口,我已将子窗口的设置为:this.StartPosition = System.Windows.Forms.FormStartPosition.CenterParent;rn为什么点击窗口后,不会显示在父窗口中央。而显示在最小化窗口里。rn(很奇怪,同样的设置,点击其他按钮,弹出的窗口又可以显示在父窗口中央)
h5 canvas  在canvas上画图 在canvas上写字 文字换行
//canvas文字换行 function write_text_other_line_auto(ctx,font,align,color,text,x,y,line_count,line_height,text_indent){ ctx.font = font; ctx.textAlign = align;
h5 plus 获取位置权限
function onPlusReady(){ plus.geolocation.getCurrentPosition(function(p){ console.log('Geolocation\nLatitude:' + p.coords.latitude + '\nLongitude:' + p.coords.longitude + '\nAltitude:' + p.coords.a...
H5获取光标的位置
1: 本实例是通过元素的autofocus属性实现的 主要功能: 是当加载页面完成后 设置光标是否自动锁定元素,即是否使元素自动获取焦点 在元素中,如果将该属性的值设置为TRUE,或直接输入autofocus属性名称,那么对应的元素将自动获取焦点 新的表单属性 1: autocomplete novalidate 2: 新的input属性 autocomplete aut
Canvas的事件处理,监听点击的位置
DOM是Web前端领域非常重要的组成部分,不仅在处理HTML元素时会用到DOM,图形编程也同样会用到。比如SVG绘图,各种图形都是以DOM节点的形式插入到页面中,这就意味着可以使用DOM方法对图形进行操作。比如有一个元素,可以直接用jquery增加click事件$(‘#p1’).click(function(){…})”。然而这种DOM处理方法在HTML5的Canvas里不再适用,Canvas使用...
H5 canvas标签 与 js 结合画图
Internet Explorer 8 以及更早的版本不支持 元素。 1.画弧函数context.arc(x,y,r,sAngle,eAngle,counterclockwise);参数描述x圆的中心的 x 坐标。y圆的中心的 y 坐 标。r圆的半径。sAngle起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。eAngle结束角,以弧度计。 counterclockwise可选。规定应该逆时...
winfrom 窗体第一次显示的位置
一个界面默认出现的位置在桌面的中间 怎么做啊
KMP(第一次匹配的首位置)
#include&lt;iostream&gt; #include&lt;algorithm&gt; #include&lt;cstdio&gt; #include&lt;string.h&gt; using namespace std; const int maxn=1e6+5; int s[maxn]; int p[maxn]; int nex[maxn]; int getnext(int m...
二分查找,返回第一次出现的位置
【题目描述】 对于一个有序数组,我们通常采用二分查找的方式来定位某一元素,请编写二分查找的算法,在数组中查找指定元素。 给定一个整数数组A及它的大小n,同时给定要查找的元素val,请返回它在数组中的位置(从0开始),若不存在该元素,返回-1。若该元素出现多次,请返回第一次出现的位置。 【测试样例】 [1,3,5,7,9],5,3 【返回结果】   1 【分析】   3个需要注意的...
怎么从右边开始搜索某个字符第一次出现的位置?
字符串查找 比如在 "ABCDFR.txt" 从右边开始里找 . 第一次出现的位置用什么函数呀,请教rn
关于delete开始位置的问题
请问为什么是total.delete(j-4,t)不是total.delete(j,t)rn<%rnString name=(String)application.getAttribute("onlineName);rnif(session.getAttribute("username")!=""&&session.getAttribute("username")!=null)rnString cancelname;//为注销人名rncancelname=(String)session.getAttribute("username");rnint j,k,t;//j为cancelname在总名岫中的初始位置,k为cancelname的总长度,t为cancelname在总名岫中的结束位置rnj=name.indexOf(cancelname);rnk=cancelname.length();rnt=j+k;rnStringBuffer total=new StringBuffer(name);rn[color=#FF0000]total=total.delete(j-4,t);///???[/color]rnname=(String)total.toString();rnapplication.setAttribute("onlineName",name);rnrn%>
Android动画开始位置问题
布局文件中include一个公有的头部文件,有个点击动画需要从上到下。现在是从最上面到最下面,如何从头部文件的下方开始到最下方。
unity-unet-设置player的开始位置
当客户端连接成功并验证通过时(你自己的验证逻辑,后面有这样的文章),会通知服务端spawn 一个该 player ,该 player 的 transform 可以自定义设置 使用 直接在 Scene 中丢几个空对象,挂上一个 Network Start Position 组件 然后在 Network Manager 中设置随机方式,就可以随机这几个点 Spawn player 了 两种
匹配开始和结束位置字符(^和$)
<p>rn 本课将带你学习前端开发中最重要的技术JavaScript, rn它是网页与用户进行交互的基石。我们将从最简单的点击事件、表单提交、元素改变颜色开始,一步步由浅及深学习JS的各种酷炫知识。最后我们还会学习Jquery框架,以提高你的前端开发效率。学完本课后,你将能独立做出与用户有复杂交互(表单、动画、视频等)的网站效果。rn</p>
倒序得到字符的开始位置
在字符串函数中,indexOf()函数是顺数从0开始得到要查找的字符的位置,那么有否函数可以从最后开始倒着向前数得到要查找的字符的位置呢?谢谢!rn
手机网站优化之:位置,位置,位置
开发十年,就只剩下这套Java开发体系了 &amp;gt;&amp;gt;&amp;gt;    ...
二分 第一次出现的位置,最后一次出现的位置
#include #include #include using namespace std; class mysolve { public: int a[20]; int binary_first(int a[],int len,int key)//第一次出现的位置 { int left=0; int right=len-1;
二分元素第一次出现的位置和最后一次出现的位置
stl里面封装了挺不错的lower_bound()和upper_bound()。但是有时候条件的判断又得自己写,所以摸索着写了两个函数,还是比较习惯 (low 上界: int binsearch_min(int lef, int rig,int key,int a[]) { int ans = -1; int low = lef,high = rig; while(low
为什么弹出层位置不是相对的?
[code=CSS]rn.infobar background:#fff9e3;border:1px solid #fadc80;color:#743e04;margin-bottom:10px;padding:8px 20px 4px 20px; font-size:12px;rn[/code]rnrn[code=HTML]rn rn 房屋出租 房屋求租 商铺出租 rn商铺转让 其他 关闭 发布租房消息rn[/code]rnrn[code=JScript]rnfunction $$(id)return document.getElementById(id);rndocument.onclick = function(evt)//在不是连接的位置单击时,隐藏 显示的层rn var _target = evt ? evt.target : event.srcElement ;rn var _id = _target.id;rn if( _id == "" )rn _id = _target.tagName;rn rn if( _id !="A")rn $$("PostPanel").style.display = 'none';rn rnrnwindow.onload=function()//网页载入时,绑定指定对象下的所有arn var xx=$$("hpanel");rn var xxx = xx.getElementsByTagName("a");rn for(var i=0,j=xxx.length; i
找出安装后的位置
则执行 which firefox 输出 /usr/bin/firefox 这个一般是1个软连接.执行ls -l /usr/bin/firefox 就可以找出真正的位置.
apt-get 后程序位置
当我准备 编译安装 sqlrelay 的时候,需要 配置一些程序的安装目录,这些程序都是 apt-get install 的,请问: . 如何确定 apt-get install 的程序的安装目录?用什么命令或方法? 谢谢回复! 若用 apt 回来的包,安装目录是包的维护者确定的,不是用户 $ dpkg -L packagename man dpkg for more detail ...
fork后子进程执行位置
The parent resumes execution and the child starts execution at the same place //子进程在父进程fork调用返回后开始执行 void main() {         int pid = 0;         printf("This is main function \n");
canvas画图
本文件中代码为js,提供canvas中画圆圈、实心圈、直线的方法实例
相关热词 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池 c#5.0 安装程序 c# 分页算法 c# gmail 发邮件 c# 多层文件