canvas练习

最新推荐文章于 2022-04-27 10:58:14 发布

qq_39095899

最新推荐文章于 2022-04-27 10:58:14 发布

阅读量203

点赞数

文章标签： html5 javascript html canvas

本文链接：https://blog.csdn.net/qq_39095899/article/details/120288538

版权

canvas时钟和鼠标移动炫彩小球

canvas前端一种动态技术，学好之后用起来很爽，做出来画面很舒服，废话不多说了直接上代码吧

时钟

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>时钟</title>
<style>
	body {
		padding: 0;
		margin: 0;
		background-color: rgba(0, 0, 0, 0.1)
	}

	canvas {
		display: block;
		margin: 200px auto;
	}
</style>
</head>
<body>
<canvas id="solar" width="300" height="300"></canvas>
<script>
init();

function init(){
    let canvas = document.querySelector("#solar");
    let ctx = canvas.getContext("2d");
    draw(ctx);
}

function draw(ctx){
    requestAnimationFrame(function step(){
        drawDial(ctx); //绘制表盘
        drawAllHands(ctx); //绘制时分秒针
        requestAnimationFrame(step);
    });
}
/*绘制时分秒针*/
function drawAllHands(ctx){
    let time = new Date();

    let s = time.getSeconds();
    let m = time.getMinutes();
    let h = time.getHours();

    let pi = Math.PI;
    let secondAngle = pi / 180 * 6 * s;  //计算出来s针的弧度
    let minuteAngle = pi / 180 * 6 * m + secondAngle / 60;  //计算出来分针的弧度
    let hourAngle = pi / 180 * 30 * h + minuteAngle / 12;  //计算出来时针的弧度

    drawHand(hourAngle, 60, 6, "red", ctx);  //绘制时针
    drawHand(minuteAngle, 106, 4, "green", ctx);  //绘制分针
    drawHand(secondAngle, 129, 2, "blue", ctx);  //绘制秒针
}
/*绘制时针、或分针、或秒针
 * 参数1：要绘制的针的角度
 * 参数2：要绘制的针的长度
 * 参数3：要绘制的针的宽度
 * 参数4：要绘制的针的颜色
 * 参数4：ctx
 * */
function drawHand(angle, len, width, color, ctx){
    ctx.save();
    ctx.translate(150, 150); //把坐标轴的远点平移到原来的中心
    ctx.rotate(-Math.PI / 2 + angle);  //旋转坐标轴。 x轴就是针的角度
    ctx.beginPath();
    ctx.moveTo(-4, 0);
    ctx.lineTo(len, 0);  // 沿着x轴绘制针
    ctx.lineWidth = width;
    ctx.strokeStyle = color;
    ctx.lineCap = "round";
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}

/*绘制表盘*/
function drawDial(ctx){
    let pi = Math.PI;

    ctx.clearRect(0, 0, 300, 300); //清除所有内容
    ctx.save();

    ctx.translate(150, 150); //一定坐标原点到原来的中心
    ctx.beginPath();
    ctx.arc(0, 0, 148, 0, 2 * pi); //绘制圆周
    ctx.stroke();
    ctx.closePath();

    for (let i = 0; i < 60; i++){//绘制刻度。
        ctx.save();
        ctx.rotate(-pi / 2 + i * pi / 30);  //旋转坐标轴。坐标轴x的正方形从 向上开始算起
        ctx.beginPath();
        ctx.moveTo(110, 0);
        ctx.lineTo(140, 0);
        ctx.lineWidth = i % 5 ? 2 : 4;
        ctx.strokeStyle = i % 5 ? "blue" : "red";
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }
    ctx.restore();
}
</script>
</body>
</html>

效果如下：
在这里插入图片描述

鼠标移动小球球

直接上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Canvas_鼠标移动炫彩小球</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="mycanvas" width="1000" height="600"></canvas>
    <script type="text/javascript">

        var mycanvas = document.getElementById("mycanvas");
        var ctx = mycanvas.getContext("2d");
        //圆形类
        function Circle(x,y,r,color){
            this.x = x;
            this.y = y;
            this.r = r;
            // 颜色的取值范围
            this.color = "rgb("+ (parseInt(Math.random() * 240 ) + 9) + ","+ (parseInt(Math.random() * 220 )+18) +",203)";

            //随机方向
            this.dx = Math.random() * 12 - 7;
            this.dy = Math.random() * 12 - 7;
            //往数组中push自己
            circleArr.push(this);
        }

         //渲染
        Circle.prototype.render = function(){
            //新建一条路径
            ctx.beginPath();
            //创建一个圆
            ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, true);
            //设置样式颜色
            ctx.fillStyle = this.color;
            //通过填充路径的内容区域生成实心的图形
            ctx.fill();
        }

         //更新
        Circle.prototype.update = function(){
            this.x += this.dx;
            this.y += this.dy;
            this.r--;
            if(this.r < 0){
                for (var i = 0; i < circleArr.length; i++) {
                    if (circleArr[i] === this) {
                        circleArr.splice(i,1);
                    };
                }
                return false;
            }
            return true;
        }
         //创建一个数组
        var circleArr = [];

         //鼠标移动事件
        mycanvas.onmousemove = function(event){
            new Circle(event.clientX,event.clientY,30,"orange");
        }

         //设置定时器每20毫秒更新和渲染
        setInterval(function(){
            ctx.clearRect(0, 0, 1000, 600)
            for (var i = 0; i < circleArr.length; i++) {
                circleArr[i].update() && circleArr[i].render();
            };
        },20);
    </script>
</body>
</html>

效果如下：
在这里插入图片描述
网上还有好多的canvas例子，这边只是找了两个最简单的例子玩玩，毕竟咱不是专业的前端技术人员，咱只是个普普通通的后端开发，所以随便玩玩，最近真的太忙了，又要考研，又要搬砖，所以博客可能很长时间都没写过，这不今天领导让我总结一下，到时候把项目文档上传公司svn，所以就有时间整理了，不要评论我摸鱼哦，不然捶死你。加油考研打工人。考上研就可以休息休息。真的是有点累哦。