캔버스를 사용하여 '도라에몽' 시계를 그리는 코드-H5 튜토리얼-php.cn

이 글에서는 캔버스를 활용한 "도라에몽" 시계 그리기에 대한 자바스크립트 학습 요약과 관련 정보를 주로 소개합니다. 필요하신 친구들은 참고하시면 됩니다.

서문: 오늘 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);
}

로그인 후 복사

자 이제 정말 끝났어요 이제 밥 먹으러 갈 시간이에요~ 프로그래머 여러분, 꼭 식사하세요~