在html5中使用Canvas简单两个实例

已有 2661人阅读此文 - - 脚本样式


利用Canvas制作时钟


使用html5中的canvas实现一个时钟。

<canvas id="demoCanvas" width="150" height="150">        

    <p>您还在上个世纪吧,现在都html5了,您还在ie6时代?</p>    

</canvas>

function clock() {
            //获得当前时钟
            var now = new Date(),
                sec = now.getSeconds(),
                min = now.getMinutes(),
                hr = now.getHours();
            hr = hr >= 12 ? hr - 12 : hr;
            var ctx = document.getElementById('demoCanvas').getContext('2d');//获得绘图区域
            ctx.save();
            ctx.clearRect(0,0,150,150);//初始化绘图canvas
            ctx.translate(75, 75);//将原点移到75,75
            ctx.scale(0.4, 0.4);//将所有操作的效果缩小到0.4
            ctx.rotate(-Math.PI / 2);//让指针开始指向12点
            ctx.strokeStyle = 'black';//初始化绘图属性
            ctx.fillStyle = 'black';
            ctx.lineWidth = 8;
            ctx.lineCap = 'round';
            ctx.save();//小时刻度
            ctx.beginPath();
            for (var i = 0; i < 12; i++) {//每小时一个
                ctx.rotate(Math.PI / 6);//将canvas旋转一周的1/12  一周为2*PI
                ctx.moveTo(100, 0);//将游标往canvas外侧移动一些
                ctx.lineTo(120, 0);//绘制长20px线
            }
            ctx.stroke();
            ctx.restore();
            ctx.save();
            ctx.lineWidth = 5;//初始化绘图属性
            ctx.beginPath();
            for (var i = 0; i < 60; i++) {//分钟刻度
                if (i%5!=0) {//除去那些整点上的分钟
                    ctx.moveTo(117, 0);//将游标移远一些
                    ctx.lineTo(120, 0);//绘制短线
                }
                ctx.rotate(Math.PI / 30);//将canvas再旋转1/60圆周
            }
            ctx.stroke();
            ctx.restore();
            ctx.save();//绘制时针
            ctx.rotate((Math.PI / 6) * hr + (Math.PI / 360) * min + (Math.PI / 21600) * sec);//旋转方向
            ctx.lineWidth = 14;
            ctx.beginPath();
            ctx.moveTo(-20, 0);//将时针开头处移动到稍稍偏离中心的位置
            ctx.lineTo(80, 0);//在小时刻度附近绘制
            ctx.stroke();
            ctx.restore();
            ctx.save();//绘制分针
            ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);
            ctx.lineWidth = 10;
            ctx.beginPath();
            ctx.moveTo(-28, 0);//分针要更长一些 所以要更偏离中心一些
            ctx.lineTo(112, 0);//绘制的长一些
            ctx.stroke();
            ctx.restore();
            ctx.save();//绘制秒针
            ctx.rotate(sec * Math.PI / 30);//旋转到当前秒针位置
            ctx.strokeStyle = '#D40000';//这根钱接近红色并且比其它指针都细
            ctx.fillStyle = '#D40000';
            ctx.lineWidth = 6;
            ctx.beginPath();
            ctx.moveTo(-30, 0);//偏离中心更远
            ctx.lineTo(83, 0);//线段更短
            ctx.stroke();
            ctx.restore();
            ctx.save();//绘制蓝色圆圈
            ctx.lineWidth = 14;//边框足够粗  蓝色
            ctx.strokeStyle = '#325FA2';
            ctx.beginPath();
            ctx.arc(0, 0, 142, 0, Math.PI * 2, true);//绘制五个完整的圆  半径为142
            ctx.stroke();
            ctx.restore();
            ctx.restore();
        }
        window.onload = function () {
            clock();//绘制时钟
            setInterval(clock, 1000);//此后每秒重绘一次时钟
        }


使用html5中canvas实现的漂亮的时钟实例


利用canvas模拟地球围绕太阳旋转


<canvas id="canvas" height="300" width="300">

    </canvas>

    <div style="display:none;">

        <img src="img/sun.jpg" id="sun" />

        <img src="img/moon.png" id="moon" />

        <img src="img/earch.png" id="earch" />

    </div>


var imgs = { sun: null, moon: null, earch: null };//初始化要使用的一系列图像 
        window.onload = function () {
            for (var i in imgs) {//从文档中载入所有的图像
                imgs[i] = document.getElementById(i);
            }
            setInterval(draw, 100);//每秒绘制10次
        }
        function draw() {
            var time = new Date();//获得所需的时间间隔
            var s = ((2 * Math.PI) )/ 6 * time.getSeconds();
            var m = ((2 * Math.PI)) / 6 * time.getMilliseconds();
            var ctx = document.getElementById('canvas').getContext('2d');//获得canvas的绘图上下文
            ctx.clearRect(0, 0, 300, 300);//清空canvas
            ctx.globalCompositeOperation = 'destination-over';//新内容总在旧内容之下绘制(以实现阴影)
            ctx.save();
            ctx.translate(150, 150);//在150,150绘制
            ctx.rotate((s + m) / 10);//将canvas向地球的位置旋转
            ctx.translate(105, 0);//向外移动105像素
            ctx.fillStyle = 'rgba(0,0,0,0,4)';//填充阴影  半透明状态
            ctx.strokeStyle = 'rgba(0,153,255,0.4)';
            ctx.fillRect(0, -12, 50, 24);//绘制阴影区域
            ctx.drawImage(imgs.earch, -12, -12);//绘制地球
            ctx.save();
            ctx.rotate(s + m);//相对地球的旋转来转动canvas
            ctx.translate(0, 28.5);//将月球放入“轨道”
            ctx.drawImage(imgs.moon, -3.5, -3.5);//绘制月球图案
            ctx.restore();
            ctx.restore();
            ctx.beginPath();//绘制地球轨道
            ctx.arc(150, 150, 105, 0, Math.PI * 2, false);
            ctx.stroke();
            ctx.drawImage(imgs.sun, 0, 0);//绘制静态的太阳
        }