本文目录
如何用canvas绘制钟表
《!DOCTYPE html》
《html》
《head》
《meta charset=“utf-8“ /》
《title》HTML5 timer《/title》
《script src=“https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js“》《/script》
《style》
.clocks { height: 500px; margin: 25px auto; position: relative; width: 500px; } 《/style》 《/head》 《body》 《header》 《h3》HTML5 timer《/h3》 《/header》 《div class=“clocks“》 《canvas id=“canvas“ width=“500“ height=“500“》《/canvas》 《/div》 《/body》《/html》-canvas
《script》var canvas, ctx;
var clockRadius = 250;var clockImage;
function clear() { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);}function drawScene() { clear(); var date = new Date(); var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); hours = hours 》 12 ? hours - 12 : hours; var hour = hours + minutes / 60; var minute = minutes + seconds / 60; ctx.save(); ctx.drawImage(clockImage, 0, 0, 500, 500); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.beginPath(); ctx.font = ’36px Arial’; ctx.fillStyle = ’#000’; ctx.textAlign = ’center’; ctx.textBaseline = ’middle’; for (var n = 1; n 《= 12; n++) { var theta = (n - 3) * (Math.PI * 2) / 12; var x = clockRadius * 0.9 * Math.cos(theta); var y = clockRadius * 0.9 * Math.sin(theta); ctx.fillText(n, x, y); } ctx.save(); var theta = (hour - 3) * 2 * Math.PI / 12; ctx.rotate(theta); ctx.beginPath(); ctx.moveTo(-15, -5); ctx.lineTo(-15, 5); ctx.lineTo(clockRadius * 0.5, 1); ctx.lineTo(clockRadius * 0.5, -1); ctx.fill(); ctx.restore(); ctx.save(); var theta = (minute - 15) * 2 * Math.PI / 60; ctx.rotate(theta); ctx.beginPath(); ctx.moveTo(-15, -4); ctx.lineTo(-15, 4); ctx.lineTo(clockRadius * 0.8, 1); ctx.lineTo(clockRadius * 0.8, -1); ctx.fill(); ctx.restore(); ctx.save(); var theta = (seconds - 15) * 2 * Math.PI / 60; ctx.rotate(theta); ctx.beginPath(); ctx.moveTo(-15, -3); ctx.lineTo(-15, 3); ctx.lineTo(clockRadius * 0.9, 1); ctx.lineTo(clockRadius * 0.9, -1); ctx.fillStyle = ’#0f0’; ctx.fill(); ctx.restore(); ctx.restore(); ctx.beginPath(); //画笔开始 ctx.lineWidth = 5; //设置画笔的线宽 ctx.strokeStyle=“blue“; //设置画笔的颜色 ctx.arc(250,250,248,0,360,false); //绘制圆形，坐标250,250 半径200，整圆（0-360度），false表示顺时针 ctx.stroke(); //绘图 ctx.closePath(); //结束画布}$(function(){ canvas = document.getElementById(’canvas’); ctx = canvas.getContext(’2d’); clockImage = new Image(); setInterval(drawScene, 1000);});《/script》-canvas
Canvas渲染会取代DOM吗
几年前就已经有团队尝试过这方面的技术方案，其目的是想解决各大浏览器某些交互行为、渲染等表现不一致的问题，并试图用canvas做更具表现力和交互的网站。
但由于受限于当时的浏览器兼容，硬件设备问题等，反而导致了更为严重的问题，一方面是要重新基于canvas构建一套新的document&style技术方案，以及基于此的document交互技术方案，这就相当于要把浏览器已经做了的DOM，CSS重新再实现一遍。-canvas
在当时这个话题在国内外技术圈有讨论过一段时间，也有成品演示，但结果并未让人满意，难以应用于实际产品，最后不了了之，最后沉寂。
在回到现在这个时间节点，以当然得浏览器支持，浏览器市场占比，硬件设备等来看。canvas可以实现DOM做的大多数事，以及一些做不到的事，但是要耗费的投入巨大，且不一定能做好，个人觉得canvas不该去做DOM做的事，完全没必要舍本逐末。-canvas
