• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

浅尝一口CanvasCanvas入门级教程

武飞扬头像
MMMMMMaxuan
帮助14

Canvas面向对象编程

绘制文本

填充文本

<body>
<canvas id="testCanvas" width="400" height="400"></canvas>
<script>
    // 获取canvas画布
    let canvas = document.getElementById('testCanvas');
    // 获取画布2d的属性
    let ctx = canvas.getContext('2d');
    ctx.font = "50px serif";
    ctx.fillText("你好~~~", 100, 100);
</script>
</body>

实现效果:字体是实心的 学新通

描边文本

<body>
<canvas id="testCanvas" width="400" height="400"></canvas>
<script>
    // 获取canvas画布
    let canvas = document.getElementById('testCanvas');
    // 获取画布2d的属性
    let ctx = canvas.getContext('2d');
    ctx.font = "50px serif";
    ctx.strokeText("你好~~~", 100, 100);
</script>
</body>

实现效果:字体是空心的 学新通

绘制一个矩形并平行移动

<body>
<canvas id="testCanvas" width="400" height="400"></canvas>
<script>
    // 获取canvas画布
    let canvas = document.getElementById('testCanvas');
    // 获取画布2d的属性
    let ctx = canvas.getContext('2d');

    // 构造函数
    function Rectangle(x, y, w, h, color) {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.color = color;
    }

    // 更新
    Rectangle.prototype.update=function () {
        // 图像位置右移
        this.x  ;
    }

    // 渲染
    Rectangle.prototype.render=function () {
        // 设置图形填充颜色
        ctx.fillStyle=this.color;
        // 设置图形边框颜色
        ctx.strokeStyle="red";
        // 渲染图形填充内容
        ctx.fillRect(this.x,this.y,this.w,this.h);
        // 渲染图形边框
        ctx.strokeRect(this.x,this.y,this.w,this.h);
    }

    // 实例化
    let rec=new Rectangle(0,100,200,200,"orange");

    // 动画过程
    setInterval(()=>{
        // 清除画布(清楚起点,清楚宽度高度为整个画布的高度宽度)
        ctx.clearRect(0,0,canvas.width,canvas.height);
        // 更新
        rec.update();
        // 渲染
        rec.render();
    },100)

</script>
</body>

实现效果:绘制一个长宽分别为200,200的矩形在画布(0,100)的位置每0.1秒向右移动一个像素

绘制一个不规则图形

<body>
<canvas id="testCanvas" width="400" height="400"></canvas>
<script>
    // 获取canvas画布
    let canvas = document.getElementById('testCanvas');
    // 获取画布2d的属性
    let ctx = canvas.getContext('2d');

    // 开始路径
    ctx.beginPath();
    // 移动到绘制点
    ctx.moveTo(100,100);
    // 描述行进路线
    ctx.lineTo(200,200);
    ctx.lineTo(300,150);
    ctx.lineTo(350,50);
    // 封闭路线
    ctx.closePath();
    // 绘制这个不规则的图形
    // 边框
    ctx.strokeStyle="red";
    ctx.stroke();
    // 填充颜色
    ctx.fillStyle="yellow";
    ctx.fill();
</script>
</body>

绘制圆弧

arc(200, 200, 100, 0, 2 * Math.PI, true)
输入参数分别为x轴位置,y轴位置,半径,圆弧开始位置,圆弧结束位置,true顺时针/false逆时针

<body>
<canvas id="testCanvas" width="400" height="400"></canvas>
<script>
    // 获取canvas画布
    let canvas = document.getElementById('testCanvas');
    // 获取画布2d的属性
    let ctx = canvas.getContext('2d');

    // 开始路径
    ctx.beginPath();
    // 描述行进路线
    ctx.arc(200, 200, 100, 0, 2 * Math.PI, true);
    // 绘制这个不规则的图形
    // 边框
    ctx.strokeStyle = "red";
    ctx.stroke();
    ctx.fillStyle="yellow";
    ctx.fill();
</script>
</body>

跟随鼠标的动态产生消失的彩色小球

<head>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<canvas id="mouseFollow" width="1200" height="600"></canvas>
<script>
    // 获取canvas画布
    let canvas = document.getElementById('mouseFollow');
    // 获取画布2d的属性
    let ctx = canvas.getContext('2d');

    // 保存所有圆的对象
    let ballArr=[];
    // 圆构造函数
    function Ball(x, y, r) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.color = getRandomColor();
        // 设置圆横向运动方向
        this.dx = parseInt(Math.random() * 10) - 5;
        // 设置圆纵向运动方向
        this.dy = parseInt(Math.random() * 10) - 5;
        ballArr.push(this);
    }

    Ball.prototype.update = function () {
        // 圆正在运动
        this.x =this.dx;
        this.y =this.dy;
        this.r-=0.5;
        // 当圆半径小于零,从数组中删除该圆
        if(this.r<=0) {
            this.remove();
        }
        // 当圆触碰到屏幕边界则反弹
        else {
            if (this.x < this.r || this.x > canvas.width - this.r) this.dx = -this.dx;
            if (this.y < this.r || this.y > canvas.height - this.r) this.dy = -this.dy;
        }
    }

    Ball.prototype.render = function () {
        ctx.beginPath();
        ctx.arc(this.x,this.y,this.r,0,2*Math.PI,true);
        ctx.fillStyle=this.color;
        ctx.fill();
    }

    Ball.prototype.remove = function () {
        ballArr.splice(ballArr.indexOf(this),1);
    }

    //随机生成透明度高的颜色
    function getRandomColor() {
        let [red, green, blue] = [0, 0, 0];
        red = Math.random() * 156 100;
        green = Math.random() * 156 100;
        blue = Math.random() * 156 100;
        return `rgba(${red},${green},${blue},0.1)`
    }

    // 设置鼠标监听,鼠标移动后在鼠标所在的地方创建小球
    canvas.addEventListener('mousemove',function (e) {
        new Ball(e.offsetX, e.offsetY, 40);
    })

    setInterval(()=>{
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ballArr.forEach(item=>{
            item.update();
            item.render();
        })
    },20)

</script>
</body>

实现效果:鼠标移动后在鼠标所在的地方创建小球,小球会慢慢变小并且扩散消失 学新通

动态粒子连线效果

<head>
    <style>
        body {
            overflow: hidden;
        }
    </style>
</head>

<body>
<canvas id="mouseFollow"></canvas>
<script>
    // 获取canvas画布
    let canvas = document.getElementById('mouseFollow');
    // 设置画布大小为网页可见区域宽高
    canvas.width = document.documentElement.clientWidth;
    canvas.height = document.documentElement.clientHeight;

    // 获取画布2d的属性
    let ctx = canvas.getContext('2d');

    // 保存所有圆的对象
    let ballArr = [];

    // 圆构造函数
    function Ball(x, y, r) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.color = "rgba(82,79,79,0.1)";
        // 设置圆横向运动方向
        this.dx = parseInt(Math.random() * 6) - 3;
        // 设置圆纵向运动方向
        this.dy = parseInt(Math.random() * 6) - 3;
        this.index = ballArr.length - 1;
        ballArr.push(this);
    }

    Ball.prototype.update = function () {
        // 圆正在运动
        this.x  = this.dx;
        this.y  = this.dy;
        if (this.x < this.r || this.x > canvas.width - this.r) this.dx = -this.dx;
        if (this.y < this.r || this.y > canvas.height - this.r) this.dy = -this.dy;
    }

    Ball.prototype.render = function () {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, true);
        ctx.globalAlpha = 1;
        ctx.fillStyle = this.color;
        ctx.fill();
        // 小球之间小于某个距离需要连线
        for (let i = 0; i <= this.index; i  ) {
            if (Math.abs(ballArr[i].x - this.x) < 120 && Math.abs(ballArr[i].y - this.y) < 120) {
                ctx.strokeStyle = "#000";
                ctx.beginPath();
                // 设置连线的透明度根据小球之间的距离变换
                ctx.globalAlpha = 10 / Math.sqrt(Math.pow(ballArr[i].x - this.x, 2)   Math.pow(ballArr[i].y - this.y, 2))
                ctx.moveTo(this.x, this.y);
                ctx.lineTo(ballArr[i].x, ballArr[i].y);
                ctx.closePath();
                ctx.stroke();
            }
        }
    }

    Ball.prototype.remove = function () {
        ballArr.splice(ballArr.indexOf(this), 1);
    }

    // 生成50个粒子
    for (let i = 0; i < 50; i  ) {
        new Ball(Math.random() * canvas.width, Math.random() * canvas.height, 2);
    }

    setInterval(() => {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ballArr.forEach(item => {
            item.update();
            item.render();
        })
    }, 20)
</script>
</body>

实现效果:当粒子之间距离小于某个数值时,粒子之间会有一条连线,距离越近,线的颜色越深 学新通

这篇文章转载于:学新通

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通
  • 本文地址: https://www.swvq.com/boutique/detail/tanhckeika
  • 联系方式: luke.wu●vfv.cc
系列文章
更多 icon
同类精品
更多 icon
我要评论
我的头像
精彩评论
继续加载