이 글에서는 캔버스를 활용한 "도라에몽" 시계 그리기에 대한 자바스크립트 학습 요약과 관련 정보를 주로 소개합니다. 필요하신 친구들은 참고하시면 됩니다.
서문: 오늘 JS 책의 캔버스 부분을 다 읽었는데 너무 행복해요~ 또 제가 좋아하는 캔버스에요~오예~
전에 누군가가 패티블루를 그려보라고 권유한 걸 봤는데, 어렸을 때 제일 좋아했던 패티블루를 왜 잊어버린 걸까요? 패티블루에게 미안한 마음을 전하기 위해 오늘 그려봤습니다. 움직이는 방법을 배웠네요~
자 여러분, 버스에 탑승하시는 승객 여러분께서는 통로를 막지 마시고 안으로 들어가시기 바랍니다. 운전하자~
텍스트:
오늘 사진 찍어서 효과 보자
뚱뚱한 파란 놈이 오늘도 이렇게 뚱뚱해 보이니 안심이 된다. 이 세상은 아직 긍정적인 에너지가 넘치고 나보다 뚱뚱한 사람은 늘 있구나 ㅋㅋㅋㅋㅋㅋ
그러면 시계 위의 코드
html 부분
<canvas id="myCanvas" width="500" height="500">快去升级浏览器吧~</canvas>
Js 부분
window.addEventListener("load", function(){ //获取画布上下文 var context = document.getElementById("myCanvas").getContext("2d"); //判断上下文是否存在,存在则可以执行接下来的代码 if(context){ //开始一个新的子路径 context.beginPath(); //我们准备画两个同心圆作为时钟的边框 //画一个外面的大圆 context.arc(100,100,99,0,2*Math.PI,false); //以某种很好看的蓝色填充 context.fillStyle = "#315f9b"; context.fill(); //画大圆的边线 context.stroke(); //开始一条新的子路径, //此处是必须的,要不然之后填充的颜色会把之前的全部覆盖 context.beginPath(); //将开始点移动到(194,100),用半径和圆心计算得出的点 context.moveTo(194,100); //画内部的小圆(圆神?) context.arc(100,100,94,0,2*Math.PI,false); //用另一种很好看的稍浅蓝色填充内部小圆 context.fillStyle = "#4ba2cf"; context.fill(); context.stroke(); //蓝胖子出现啦~ //创建一个Image对象,将它的src设置为蓝胖子的图片 var image = new Image(); image.src = "2.png"; //用上下文的方法drawImage将图片从点(25,25)开始画,画在边长150的矩形中 context.drawImage(image,25,25,150,150); //移动变换矩阵 //移动后(100,100)作为新的原点,即(0,0) context.translate(100,100); //用一个同样很好看的蓝色来画我们的时间点 context.fillStyle = "#02285a"; //fillText第一个参数为要画的字符串,第二个参数为x,第三为y //以下x,y值是调试后的效果,大家根据不同情况,再做调整哦 context.fillText("12",-5,-80); context.fillText("6",-4,87); context.fillText("3",80,1); context.fillText("9",-86,1); //稍候详述此函数 nowTime(context); } },false);
다이얼이 등장했지만 시계에서 가장 중요한 것은 시간을 표시할 수 있다는 점(말도 안되는 소리)이므로 다음 단계는 포인터를 그리는 것입니다
nowTime 함수 부분
function nowTime(context){ //创建一个日期对象,用来获取本地的时间 var myDate = new Date(); //获取小时,分钟,秒钟 var myHour = myDate.getHours(); //将小时转换为12时制 if(myHour >= 12){ myHour = myHour-12; } var myMin = myDate.getMinutes(); var mySec = myDate.getSeconds(); //描绘小时 //用来存放当前小时在表盘上的弧度 var hourArc; //以3时作为圆周的起点,顺时针表示弧度 if(myHour < 3){ hourArc = 2*Math.PI-(3-myHour)*Math.PI/6; }else{ hourArc = (myHour-3)*Math.PI/6; } //当指向3,6,9,12时,正好为90°的倍数 //此处因为角度转换为弧度有偏差,所以特别处理下 switch(myHour){ case 0: hourArc = Math.PI*3/2;break; case 3: hourArc = 0;break; case 6: hourArc = Math.PI/2;break; case 9: hourArc = Math.PI;break; } //调用drawTime函数,在表盘上画出小时针 drawTime(context,hourArc,60); //描绘分钟 //用来存放当前分钟在表盘上的弧度 var minArc; //以15分作为圆周的起点,顺时针表示弧度 if(myMin < 15){ minArc = 2*Math.PI-(15-myMin)*Math.PI/30; }else{ minArc = (myMin-15)*Math.PI/30; } //处理分钟,依然是此处因为角度转换为弧度有偏差,所以特别处理下 switch(myMin){ case 0: minArc = Math.PI*3/2;break; case 15: minArc = 0;break; case 30: minArc = Math.PI/2;break; case 45: minArc = Math.PI;break; } //调用drawTime函数,在表盘上画出分钟针 drawTime(context,minArc,80); //描绘秒钟 //用来存放当前秒钟在表盘上的弧度 var secArc; //以15秒作为圆周的起点,顺时针表示弧度 if(mySec < 15){ secArc = 2*Math.PI-(15-mySec)*Math.PI/30; }else{ secArc = (mySec-15)*Math.PI/30; } //处理秒钟,依然依然此处因为角度转换为弧度有偏差,所以特别处理下 switch(mySec){ case 0: secArc = Math.PI*3/2;break; case 14: secArc = 0;break; case 29: secArc = Math.PI/2;break; case 44: secArc = Math.PI;break; } //调用drawTime函数,在表盘上画出小时针 drawTime(context,secArc,80,"red"); //设置一个超时调用函数,每一秒超时调用nowTime更新时钟 setTimeout(function(){ //调用画新的指针前,当然应该要清除下原来的时针吧,用clearTime函数,真的好用! clearTime(context); //把闲杂指针清除了,再画一次当前的指针吧~ nowTime(context); },1000); }
그래서 우리는 구체적으로 포인터를 그리기 위해 컨텍스트를 조작하는 방법은 무엇입니까? 나도 모르니까 오늘은 여기서 마치자~
농담이야 헤헤 진정해 (나한테 속은 척 해야지)
다음 단계는 총 4개의 매개변수를 갖는 drawTime 함수이다. ( context, theArc, theLength, color="#000"), context는 캔버스의 컨텍스트를 한눈에, theArc는 캔버스를 회전하려는 각도, theLength는 포인터의 길이, color는 색상을 나타냅니다. 포인터의.
function drawTime(context,theArc,theLength,color="#000"){ //保存当前的画布环境,和restore方法配合使用能够恢复画布上下文 context.save(); //旋转画布,rotate传入的参数代表旋转的弧度 context.rotate(theArc); //开始一条新的子路径,我们开始画指针啦 context.beginPath(); //将开始点移动到(0,0) context.moveTo(0,0); //画一条到(theLength,0)的路径 context.lineTo(theLength,0); //用指定的color颜色画这条路径 context.strokeStyle = color; //路径的宽度为2 context.lineWidth = 2; //路径是不可见的,如果要看到路径,需要用stroke来描线,而如何描这条线,可以由我们以上用到的几个属性来定义 context.stroke(); //恢复上下文 context.restore(); }
끝나고 있지만 여전히 매우 중요한 ClearTime 기능이 없으면 빽빽한 초침이 시계를 차지하게 됩니다. 환공포증 환자를 돌보는 것은 모두의 책임입니다
function clearTime(context){ //我们开始一条新的子路径,然后描绘一个充斥着好看蓝色的圆,把我们之前画的指针都遮盖住,相当于清除了一次表盘 context.beginPath(); context.arc(0,0,80,0,2*Math.PI,false); context.fillStyle = "#4ba2cf"; context.fill(); //很不幸,我们的蓝胖子也被误伤了,所以再召唤它一次吧,决定就是你啦,皮卡丘(?咦) var image = new Image(); image.src = "2.png"; //这个坐标和第一次加载的坐标不同,因为我们修改了变换矩阵,还记得吗?所以,它们的坐标应该是互补的 context.drawImage(image,-75,-75,150,150); }
자 이제 정말 끝났어요 이제 밥 먹으러 갈 시간이에요~ 프로그래머 여러분, 꼭 식사하세요~
이상은 이 글의 전체 내용입니다. 도움이 되셨으면 좋겠습니다 여러분의 학습에 도움이 됩니다. 더 많은 관련 내용을 보시려면 PHP 중국어 웹사이트를 주목해주세요!
관련 권장 사항:
HTML5에서 Canvas를 사용하여 웃는 얼굴을 그리는 코드
HTML5 및 CSS3 코드로 제품 정보의 3D 표시 구현
위 내용은 캔버스를 사용하여 '도라에몽' 시계를 그리는 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!