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问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
HTML里为啥input和canvas元素水平放在一行没有对齐,要写一个验证码,附上代码
-
HTML5 canvas,画图时有什么属性或者方法可以看到画图的路径过程
-
移动端canvus得到的字体点阵信息与电脑端不一致。
-
苏宁的滑块验证码的背景图片canvas是如何绘制出来的。。。
-
android 在 view 里我使用一个 自定义的 canvas 画图 出现问题
-
HTML5如何在现有的背景图片上进行画图?(canvas如何实现)
-
java swt canvas.redraw 画图问题
-
Android 自定义View 中如何 再new 一个Canvas
-
vue-video-player 怎么实现截图功能呢?
-
Android Canvas clipPath 画图锯齿问题
-
Android自定义View怎样获取到onDraw(Canvas canvas)里的canvas对象啊?
-
typescript里怎么用h5新标签?
-
怎么把js函数的参数变成全局变量,用到后面的函数中运算
-
html2canvas+Canvas2Image在移动端出现的问题
-
canvas在setInterval中无法画图(各参数传递正确)
-
html5 多个canvas 如何用clearRect清除指定的一个canvas上的区域啊?
-
关于canvas绘制二次贝塞尔曲线的问题
-
fileObj = document.getElementById("file").files[0]; 我想直接把地址给这个变量
-
C++ Windows API 发送鼠标点击消息问题
-
程序员真是太太太太太有趣了!!!
网络上虽然已经有了很多关于程序员的话题,但大部分人对这个群体还是很陌生。我们在谈论程序员的时候,究竟该聊些什么呢?各位程序员大佬们,请让我听到你们的声音!不管你是前端开发...
史上最详细的IDEA优雅整合Maven+SSM框架(详细思路+附带源码)
网上很多整合SSM博客文章并不能让初探ssm的同学思路完全的清晰,可以试着关掉整合教程,摇两下头骨,哈一大口气,就在万事具备的时候,开整,这个时候你可能思路全无 ~中招了咩~ ,还有一些同学依旧在使用eclipse或者Myeclipse开发,我想对这些朋友说IDEA 的编译速度很快,人生苦短,来不及解释了,直接上手idea吧。这篇文章每一步搭建过程都测试过了,应该不会有什么差错。本文章还有个比较优秀的特点,就是idea的使用,基本上关于idea的操作都算是比较详细的,所以不用太担心不会撸idea!最后,本文
史上最全的后端技术大全,你都了解哪些技术呢?
| 导语工欲善其事,必先利其器;士欲宣其义,必先读其书。后台开发作为互联网技术领域的掌上明珠,一直都是开发者们的追逐的高峰。本文将从后台开发所涉及到的技术术语出发,基于...
吃人的那些 Java 名词:对象、引用、堆、栈
作为一个有着 8 年 Java 编程经验的 IT 老兵,说起来很惭愧,我被 Java 当中的四五个名词一直困扰着:**对象、引用、堆、栈、堆栈**(栈可同堆栈,因此是四个名词,也是五个名词)。每次我看到这几个名词,都隐隐约约觉得自己在被一只无形的大口慢慢地吞噬,只剩下满地的衣服碎屑(为什么不是骨头,因为骨头也好吃)。
我花了一夜用数据结构给女朋友写个H5走迷宫游戏
起因 又到深夜了,我按照以往在csdn和公众号写着数据结构!这占用了我大量的时间!我的超越妹妹严重缺乏陪伴而 怨气满满! 而女朋友时常埋怨,认为数据结构这么抽象难懂的东西没啥作用,常会问道:天天写这玩意,有啥作用。而我答道:能干事情多了,比如写个迷宫小游戏啥的! 当我码完字准备睡觉时:写不好别睡觉! 分析 如果用数据结构与算法造出东西来呢? ...
团队中的 Git 实践
在 2005 年的某一天,Linux 之父 Linus Torvalds 发布了他的又一个里程碑作品——Git。它的出现改变了软件开发流程,大大地提高了开发流畅度!直到现...
不识 Pandas,纵是老手也枉然?
作者 |周志鹏 责编 | 郭 芮 这段时间和一些做数据分析的同学闲聊,我发现数据分析技能入门阶段存在一个普遍性的问题,很多凭着兴趣入坑的同学,都能够很快熟悉Python基础语法,然后不约而同的一头扎进《利用Python进行数据分析》这本经典之中,硬着头皮啃完之后,好像自己什么都会了一点,然而实际操作起来既不知从何操起,又漏洞百出。 至于原因嘛,理解不够,实践不够是两条老牌的拦路...
接班马云的为何是张勇?
上海人、职业经理人、CFO 背景,集齐马云三大不喜欢的张勇怎么就成了阿里接班人? 作者|王琳 本文经授权转载自燃财经(ID:rancaijing) 9月10日,张勇转正了,他由阿里巴巴董事局候任主席正式成为阿里巴巴董事局主席,这也意味着阿里巴巴将正式开启“逍遥子时代”。 从2015年接任CEO开始,张勇已经将阿里巴巴股价拉升了超过200%。但和马云强大的个人光环比,张勇显得尤其...
程序员终极面试指南!
身为技术人,如何拿下自己心仪的 offer? 作者|James Bedford 译者 |苏本如,责编 | 屠敏 出品 | CSDN(ID:CSDNnews) 以下为译文: 介绍 最近半年以来,我一直在积极指导开发人员,包括新手和有经验的开发人员。我发现,所有开发人员最关心的问题之一通常都是寻找工作。 如果你已经被录用了,很有可能你经历了一个令人精疲力竭的过程。...
我在快手认识了 4 位工程师,看到了快速发展的公司和员工如何彼此成就!
作者 | 胡巍巍 出品 | CSDN(ID:CSDNnews) 从西二旗地铁站B口出来,步行700多米可以看到一个工业建筑风格的院子。这个独立的院子和后厂村各大互联网公司的高楼林立有些不同。 院子里有7栋6层高的楼,几栋楼之间打通,可以从A栋自由穿行到F栋。这里就是快手总部。这个园区可以容纳6000多名员工,目前40%以上是研发人员。 这些研发人员维护着快手这款日活超过2亿的ap...
让程序员崩溃的瞬间(非程序员勿入)
今天给大家带来点快乐,程序员才能看懂。 来源:https://zhuanlan.zhihu.com/p/47066521 1. 公司实习生找 Bug 2.在调试时,将断点设置在错误的位置 3.当我有一个很棒的调试想法时 4.偶然间看到自己多年前写的代码 5.当我第一次启动我的单元测试时 ...
分享一个 pycharm 专业版的永久使用方法
刚开始接触Python,首先要解决的就是Python开发环境的搭建。 目前比较好用的Python开发工具是PyCharm,他有社区办和专业版两个版本,但是社区版支持有限,我们既然想好好学python,那肯定得用专业的不是。 但他专业版要么只能试用一个月,要么就是 $ , 身为猿军中的一员怎么能让他们这些小伎俩阻碍了我们继续前进的步伐呢?所以我在度娘的引导下,一步步实现了PyCharm的永久使用(虽...
用Python分析2000款避孕套,得出这些有趣的结论
到现在为止,我们的淘宝教程已经写到了第四篇,前三篇分别是: 第一篇:Python模拟登录淘宝,详细讲解如何使用requests库登录淘宝pc端。 第二篇:淘宝自动登录2.0,新增Cookies序列化,教大家如何将cookies保存起来。 第三篇:Python爬取淘宝商品避孕套,教大家如何爬取淘宝pc端商品信息。 今天,我们来看看淘宝系列的第四篇 我们在上一篇的时候已经将淘宝数据爬取下来了,...
无需安装,仅需 1 条指令,秒实现内网穿透的神器,你有用过吗?
什么是 ServeoServeo 是一个免费的内网穿透服务,Serveo 可以将本地计算机暴露在互联网上,官方声称其为 Ngrok 的绝佳替代品。Serveo 其最大优点...
作为曾经的 Web 开发“王者”,jQuery 的传奇怎么续写?
作为世界上使用最广泛的JavaScript库,jQuery曾经帮助过一代开发人员创建了适用于每种浏览器的网站,可以说,Web开发之所以能有今天,jQuery可谓功不可没。但是随着新的库、框架和范例的不断涌现,jQuery作为Web开发首选工具的地位已经逐渐不保......任何事物都有其自身发展的兴盛与衰落,短期内jQuery并不会消失,但是对于其来说,又该如何维稳逆袭呢? 作者|Da...
重磅:硬核前端面试开源项目汇总(进大厂必备)
复习前端面试的知识,是为了巩固前端的基础知识,最重要的还是平时的积累!”开源项目https://github.com/InterviewMap/CS-Interview...
为什么平头哥做芯片如此迅猛?
作者 | 胡巍巍 发自杭州云栖大会责编 | 唐小引出品 | CSDN(ID:CSDNnews)2018年10月31日,阿里旗下的平头哥半导体有限公司成立。如今,平头哥成立...
对计算机专业来说学历真的重要吗?
我本科学校是渣渣二本,研究生学校是985,现在毕业五年,校招笔试、面试,社招面试参加了两年了,就我个人的经历来说下这个问题。 这篇文章很长,但绝对是精华,相信我,读完以后,你会知道学历不好的解决方案,记得帮我点赞哦。 先说结论,无论赞不赞同,它本质就是这样:对于技术类工作而言,学历五年以内非常重要,但有办法弥补。五年以后,不重要。 目录: 张雪峰讲述的事实 我看到的事实 为什么会这样 ...
技术人员要拿百万年薪,必须要经历这9个段位
很多人都问,技术人员如何成长,每个阶段又是怎样的,如何才能走出当前的迷茫,实现自我的突破。所以我结合我自己10多年的从业经验,总结了技术人员成长的9个段位,希望对大家的职...
多线程编程是后台开发人员的基本功
这里先给大家分享一个小故事:在我刚开始参加工作的那年,公司安排我开发一款即时通讯软件(IM,类似于 QQ 聊天软件),在这之前我心里也知道如果多线程操作一个整型值是要加锁...
Java 网络爬虫,就是这么的简单
这是 Java 网络爬虫系列文章的第一篇,如果你还不知道 Java 网络爬虫系列文章,请参看 学 Java 网络爬虫,需要哪些基础知识。第一篇是关于 Java 网络爬虫入门内容,在该篇中我们以采集虎扑列表新闻的新闻标题和详情页为例,需要提取的内容如下图所示: 我们需要提取图中圈出来的文字及其对应的链接,在提取的过程中,我们会使用两种方式来提取,一种是 Jsoup 的方式,另一种是 httpcli...
相关热词 c# mysql插入 c# sha256 加密 c#窗体上的叉添加事件 c#打印图片文件 c#後台調前台js c#控制台美化 c# 标记 浮点型 c#获取当前的农历日期 c# 构造函数重载 c# 页面功能注释