体育在线亚搏官网_亚搏体育官方平台

【体育在线亚搏官网_亚搏体育官方平台】体彩在线网-提供最快最全最准的足球比分、篮球即时比分,体彩平台开户,网上投注,手机端app下载网上打牌用真钱,扑克比大小,等现金在线赌博游戏正规可靠的信誉娱乐平台

绘制机械钟,CorelDRAW交互式工具创制旋转复古背

来源:http://www.jelcinematography.com 作者:电视栏目 人气:193 发布时间:2019-09-20
摘要:先看看效果图 demo演示: 用到的有个别绘制方法求证: 首先步,画出贰个矩形,然后转曲,用节点工具调整出如下形状 context.translate(x,y)方法,重置画布的坐标起源,设置后,x,y坐标处

先看看效果图

demo演示:

图片 1

用到的有个别绘制方法求证:

首先步,画出贰个矩形,然后转曲,用节点工具调整出如下形状

context.translate(x,y)方法,重置画布的坐标起源,设置后,x,y坐标处为成为起始坐标(0,0);

图片 2

context.arc(圆心x坐标, 圆心Y坐标, 圆半径, 初叶弧度,甘休点弧度, 是还是不是顺时针) 情势绘制圆形,或然圆弧;

其次步,上色,旋转复制一个出来,得出如下图形

context.rotate(弧度) 方法接受一个弧度制参数,旋转画布,然后绘制图形,相当于给绘制的图样旋转三个角度;

图片 3

context.save() 和 context.restore() 方法,记录起首状态和回复情形

再顺着她的门径,使用再制火速键,在那Ritter别讲明下,偶尔软件抽风,老是出现再制不成功,那一年能够用ALT+F8,旋转,但以此要求您通晓东西的角度,况兼要算的恰恰好

context.fillRect(矩形左上角X坐标,Y坐标,宽度,中度):  绘制矩形

本身今日叁个色角是15度,四个正是30度,360/30度,可得出拾叁个,刚好组成一圈

context.fillText(text,左上角x坐标,Y坐标): 绘制文字

图片 4

修改:调动了下数字的显示,最开端用Math.cosMath.sin计算出来的值总是不对,就偷懒用旋转的章程来画的数字,那样显示出来文字是旋转的

图片 5

最后开采原先是Math.cosMath.sin接受的是弧度制为单位,作者最最初传成角度制了,查了材质才意识时那么些缘故,改了就对了:

上边要做旋转的功能,这步要用到新交互的工具了,吧里还会有好五个人在用X9,那几个本子有个别效果都缺乏,最棒都装个X4

数字坐标计算格局:

图片 6

      知道了半径,知道了角度,用三角函数的公式就会揣测出相应的岗位。     

在此处选用扭曲变形

        // 绘制表盘文字          for(i = 0;i<12;i++){              // 360度分为12段,每段30度              angle = i * 30;              // 转换为弧度制,Math.sin、Math.cos都接受弧度制单位              angle = angle*Math.PI/180;;              // 0度角是3点,所以需要转换一下数字              font = (i + 3 > 12)?i+3-12 : i+3;              // 计算X坐标              fontX = Math.round(Math.cos(angle)*(r-30));              // 计算Y坐标              fontY = Math.round(Math.sin(angle)*(r-30));              // 设置文字样式              context.font = 'bold 14px 微软雅黑';              // 绘制文字              context.fillText(font+'',fontX,fontY);          }

图片 7

canvas 动画正是接踵而来铲除重绘的经过

图片 8

角度弧度制转变,高中课本上有,都忘得大约了,如下:

图片 9

弧度制单位:rad    角度制单位:度        →      180度 = PI弧度    →        1度 = PI弧度/180度      →       1弧度= 180度/PI弧度

这步很关键,绝对要以核心点为骨干

得出角度转变公式 ↓↓↓↓↓

好了,步骤就这样,大家能够做协和喜欢的图片了

弧度 = 角度*PI/180

图片 10

角度 = 弧度*180/PI

代码如下:

<!DOCTYPE html>  <html>  <head>      <meta charset="utf-8">      <title>canvas绘制时钟</title>  </head>  <body>  <canvas id="graph" width="500px" height="500">你的浏览器不支持canvas</canvas>  <script type="text/javascript">      var canvas = document.getElementById('graph');      var context = canvas.getContext('2d');      var r = canvas.width/2.5;  //半径      //将坐标中心作为起启点      context.translate(canvas.width / 2, canvas.height / 2);        function drawCircle() {          context.beginPath();          context.lineWidth = 5;          context.strokeStyle = "#000";          context.arc(0, 0, r, 0, Math.PI * 2, true);          context.stroke();          context.closePath();      }        function drawClockScale() {          var rad = 0, angle, font, fontX, fontY;          context.fillStyle = '#000';          // 绘制表盘时刻度          for (var i = 0; i < 12; i++) {              context.save();              rad = i * Math.PI / 6;  // 弧度制,大刻度,总共分为12刻度,每刻度为:2π/12 → π/6              context.rotate(rad);  // 旋转画布绘制刻度              context.fillRect(r - 10, 0, 10, 5);              context.restore();          }          // 绘制表盘分刻度          for (i = 0; i < 60; i++) {              context.save();      // 记录旋转画布之前初始状态              rad = i*Math.PI/30;              context.rotate(rad);  // 旋转画布绘制刻度              context.fillRect(r - 10, 0, 5, 2);   //绘制              context.restore();  // 恢复初始状态,未旋转前          }            // 绘制表盘文字          for(i = 0;i<12;i++){              angle = i * 30;              // 转换为弧度制,Math.sin、Math.cos都接受弧度制单位              angle = angle*Math.PI/180;;              font = (i + 3 > 12)?i+3-12 : i+3;              fontX = Math.round(Math.cos(angle)*(r-30));              fontY = Math.round(Math.sin(angle)*(r-30));              context.font = 'bold 14px 微软雅黑';              context.fillText(font+'',fontX,fontY);          }      }        function drawHand(rotate,width,height){          context.save();          rotate = rotate*Math.PI/180;      // 转换为弧度制          context.rotate(rotate);          context.fillRect(-10,0,width,height);          context.restore();      }        function setTime(){          var hour = new Date().getHours();          var minute = new Date().getMinutes();          var second = new Date().getSeconds();            //console.log(hour + ':' + minute + ':' + second);          var hourRotate,minRotate,secRotate;          // 计算秒针角度并绘制图形          secRotate = second*6-90;          drawHand(secRotate,r-30,2);          // 计算分针角度并绘制图形          minRotate = (minute*60 + second)*0.1 - 90;          drawHand(minRotate,r-50,4);          // 计算时针角度并绘制图形          hourRotate = (hour*60*60 + minute*60 + second)/120 - 90;          drawHand(hourRotate,r-70,5);      }        setInterval(function(){          context.clearRect(-canvas.width / 2,-canvas.height / 2,canvas.width,canvas.height);          drawCircle();          drawClockScale();          setTime();      },1000);  </script>  </body>  </html>

 


本文由体育在线亚搏官网发布于电视栏目,转载请注明出处:绘制机械钟,CorelDRAW交互式工具创制旋转复古背

关键词:

频道精选

最火资讯