怎么用canvas做一个有立体感的砖块

Posted 2023-05-16

参考技术A 新买一个iphone 3GS 8g,没用过爱疯，有很多不知道，在网上也找了不少资料来研究，还是不太清楚。请使用过iphone的高手详细回答以下问题(如果不是针对我这些问题的具体回答、而只是网上复制粘贴的东东，请不要回答，回答了也没分分哦)：
1、同步了电脑中的PDF、TXT电子书后，如何从手机上再把它找出来？我已经通过itunes同步了，可是根本找不到放哪去了。刚才电话客服，说是要转换格式，请问用什么软件转换？
2、各种格式用何种浏览器好用？最好是免费的软件。已经装上了mobile RSS, Stanza,
可是打开后也找不到从电脑上同步的书。
3、打开网页后，如果把网页保存下来，是不是能减少流量？如果是，怎么保存网页，断网后慢慢看？需要干什么软件吗?

canvas 画一个钟表

只是作为练习，没怎么抽象，都放在函数里面，只是简单的实现。

首先说下思路，将一个圆分成12份做表盘，然后用lineTo等方法话指针，最后用一个setInterval刷新画布，让指针每隔一秒动一下。

js代码如下:

            window.onload = function () {
                var canvas = document.getElementById(‘myCanvas‘),
                    context = canvas.getContext(‘2d‘),
                    centerX = canvas.height / 2,
                    centerY = canvas.width / 2,
                    clockRadius = 100,//钟表的半径
                    radius = 5,//小圆的半径
                    secondHandLength =Math.ceil(clockRadius*0.9),//各种指针长度
                    minuteHandLength = Math.ceil(clockRadius*0.75),
                    hourHandLength = Math.ceil(clockRadius*0.5);
    
                
    
    
    
                function drawClock() {　　　　　　　　　　　　　　　　　//画表盘，每次刷新要重画所以提出来
                    drawCircle(centerX, centerY, radius, ‘gray‘);
                    for (var i = 0; i < Math.PI * 2;) {
                        var y = Math.sin(i) * clockRadius + centerY;
                        var x = Math.cos(i) * clockRadius + centerX;
                        drawCircle(x, y, radius);
                        i += Math.PI / 6;
                    }
                }
    
                function drawCircle(x, y, radius, color) {　　　　//画圆的基础方法
                    x = x || 0;
                    y = y || 0;
                    radius = radius || 5;
                    color = color || ‘lightseagreen‘;
                    context.save();
                    context.beginPath();
                    context.arc(x, y, radius, 0, Math.PI * 2);
                    context.fillStyle = color;
                    context.stroke();
                    context.fill();
                    context.closePath();
                    context.restore();
                }
    
                function drawLine(startX, startY, endX, endY, lineWidth,color) {  //画线的基础方法
                    startX = startX || 0;
                    startY = startY || 0;
                    endX = endX || 0;
                    endY = endY || 0;
                    lineWidth = lineWidth || 1;
                    color = color||‘black‘;
    
                    context.save();
                    context.beginPath();
                    context.strokeStyle=color;
                    context.lineWidth = lineWidth;
                    context.moveTo(startX, startY);
                    context.lineTo(endX, endY);
                    context.closePath();
                    context.stroke();
                    context.restore();
                }
    
                function drawFrame() {　　　　　　　　//刷新画布的基础方法
                    context.clearRect(0, 0, canvas.width, canvas.height);　　//先清空画布，准备重新画
                    var d = new Date(), seconds = d.getSeconds(),　　　　　　　//用second/60*Math.PI算出指针角度,由于钟表12点是0所以减个偏移量，让second=0
                        angle = seconds / 30 * Math.PI-Math.PI/2;　　　　　　　//的时候指针指的是12点位置，里面能约的直接约了，省得多算几部
    
                    var endX = secondHandLength * Math.cos(angle);　　　　
                    var endY = secondHandLength * Math.sin(angle);
    
                    drawLine(centerX, centerY, endX+centerX, endY+centerY);　//绘制秒针
                    //分针
                    var minutes = d.getMinutes();
                    angle = minutes/30*Math.PI-Math.PI/2;
                    endX = Math.cos(angle)*minuteHandLength;
                    endY = Math.sin(angle)*minuteHandLength;
                    drawLine(centerX, centerY, endX+centerX, endY+centerY,1,‘green‘);　　//原理同上绘制分针
                    //时针
                    var hours = d.getHours();
                    angle = hours/6*Math.PI-Math.PI/2;
                    endX = Math.cos(angle)*hourHandLength;
                    endY = Math.sin(angle)*hourHandLength;
                    drawLine(centerX, centerY, endX+centerX, endY+centerY,1,‘blue‘);　　//绘制时针
                    drawClock();
                }
    
                drawFrame();　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//setInterval一秒以后才启动，所以先画一次
                setInterval(drawFrame, 1000);　　　　　　　　　　　　　　　　　　　　　　　　　//将setInterval设置为1秒，每1秒刷新一次画布
            }

下面是html中body的内容，就一个canvas

<canvas id="myCanvas" height="400" width="400" style="border-style:solid;"></canvas>

 

其实有些方法还是不太懂，但效果出来了，以后慢慢理解吧。。