Canvas 网站源码解析与深入理解，canvas 网站

本文目录导读：

1. Canvas 基础知识
2. Canvas 高级应用

Canvas 是一个功能强大的 HTML5 元素，它允许开发者绘制图形、动画和交互式内容，本文将深入探讨 Canvas 的基本概念、使用方法以及一些高级技巧，帮助您更好地理解和利用这一强大的工具。

图片来源于网络，如有侵权联系删除

Canvas 基础知识

1 什么是 Canvas？

Canvas 是 HTML5 中新增的一个元素，它的核心是一个可以绘制的矩形区域，在这个区域内，我们可以通过 JavaScript 来绘制各种图形、文字和图像等。

2 Canvas 的基本属性和方法

• width 和 height：设置画布的大小。
• getContext("2d")：获取绘图上下文对象，用于执行绘制操作。
• fillRect(x,y,width,height)：填充矩形。
• strokeRect(x,y,width,height)：绘制空心矩形。
• clearRect(x,y,width,height)：清除指定区域的绘制内容。

3 绘制基本形状

圆形

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 绘制实心圆
ctx.beginPath();
ctx.arc(100, 50, 30, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
// 绘制空心圆
ctx.beginPath();
ctx.arc(200, 50, 30, 0, Math.PI * 2);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.stroke();

椭圆形

// 绘制椭圆
ctx.save();
ctx.translate(300, 150); // 将坐标原点移到中心点
ctx.scale(0.5, 0.5); // 缩放大小
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(-100, 0);
ctx.quadraticCurveTo(-50, -50, 0, 0);
ctx.quadraticCurveTo(50, -50, 100, 0);
ctx.closePath();
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.restore();

多边形

// 绘制正方形
ctx.save();
ctx.translate(400, 250);
ctx.rotate(Math.PI / 4);
ctx.fillRect(-50, -50, 100, 100);
ctx.restore();
// 绘制五角星
ctx.save();
ctx.translate(500, 350);
ctx.rotate(Math.PI / 6);
for (var i = 0; i < 5; i++) {
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(50, 0);
    ctx.lineTo(25, 43);
    ctx.lineTo(0, 0);
    ctx.fill();
    ctx.rotate(Math.PI / 5);
}
ctx.restore();

Canvas 高级应用

1 动画效果

在 Canvas 上实现动画可以通过定时器（setInterval）或动画帧（requestAnimationFrame）来完成，以下是一个简单的例子：

图片来源于网络，如有侵权联系删除

function animate() {
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除屏幕
    // 更新位置
    ball.x += ball.speedX;
    ball.y += ball.speedY;
    // 碰撞检测
    if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
        ball.speedX *= -1;
    }
    if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
        ball.speedY *= -1;
    }
    // 绘制球体
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
    ctx.fillStyle = ball.color;
    ctx.fill();
    requestAnimationFrame(animate);
}
var ball = {
    x: 100,
    y: 50,
    radius: 20,
    color: 'green',
    speedX: 5,
    speedY: 5
};
animate();

2 图像处理

Canvas 还支持对图像进行处理，如缩放、旋转、平移等，下面是如何加载图片并进行处理的示例代码：

var img = new Image();
img.src = 'path/to/image.jpg';
img.onload = function() {
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    // 绘制原始图像
    ctx.drawImage(img, 0, 0);
    // 对图像进行旋转和平移处理
    ctx.save();
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate(Math.PI / 4);

标签： #canvas网站源码