Canvas--画布元素

最新推荐文章于 2021-11-12 11:47:33 发布

原创最新推荐文章于 2021-11-12 11:47:33 发布 · 556 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

10 篇文章

订阅专栏

Canvas元素用于在网页上绘制图形，包括矩形、线条、圆弧、文本、图像等。通过JavaScript的getContext方法进行操作，可以给图形上色、擦除Canvas、实现碰撞检测等功能。requestAnimationFrame API则用于高性能的帧动画。

canvas元素是html5中新加入的标签，用来绘制各式各样的图案

<canvas></canvas>

js代码：

//获取指定的canvas元素
var canvas = document.getElementById('canvas');
//调用canvas元素的getContext方法访问获取2d渲染上下文
var context = canvas.getContext('2d');

绘画操作都是在getContext方法中操作，而不是在canvas这个元素上

矩形

context.fillRect(x,y,宽,高);//实心矩形
context.strokeRect(x,y,宽,高);//空心矩形

线条

//开始设置路径
context.beginPath();
//设置路径原点
context.moveTo(x,y);
//设置路径终点
context.lineTo(x,y);
//输出路径轮廓
context.stroke()/context.fill();
//自动闭合
context.closePath();

修改线宽

context.lineWidth = 5;

圆弧

context.arc(x, y, radius, startAngle, endAngle, anticlockwise);

x: 圆的中心的 x 坐标
y: 圆的中心的 y 坐标
radius: 圆的半径
startAngle: 圆弧的开始角度
endAngle: 圆弧的结束角度
anticlockwise: 可选的参数，规定应该逆时针还是顺时针绘图，默认值为 false

PS：圆弧的开始角度和结束角度都是以弧度来表示的，而不是使用角度来表示

var degree = 1; // 表示 1°
var radians = degree * (Math.PI / 180); // 0.0175弧度

文本

两种方法

context.fillText(text,x,y);//实心文本
context.strokeText(text,x,y);//空心文本
context.font = '60px 黑体';

给图形上色

context.fillStyle = color;//填充上色
context.strokeStyle = color;//轮廓上色
//只会应用于修改之后创建的图形

擦除Canvas

context.clearRect();//清除特定的图形，就用该图形的数据
context.clearRect( 0 , 0 , canvas.width , canvas.height);//清除整个画布

图像

加载图像

context.drawImage(image,x,y,[宽度],[高度]);

裁剪图像

context.drawImage(image, source_x, source_y, source_width, source_height, x, y, width, heigh);

image：源图像对象
source_x：源图像的裁剪区原点横坐标
source_y：源图像的裁剪区原点纵坐标
source_width：源图像的裁剪区宽度
source_height：源图像的裁剪区高度
x：在画布上绘制图像的原点横坐标
y：在画布上绘制图像的原点纵坐标
width：在画布上绘制图像的宽度
heigh：在画布上绘制图像的高度

requestAnimFrame

requestAnimationFrame 是专门为实现高性能的帧动画而设计的一个API。

//使用 requestAnimationFrame 的兼容写法
window.requestAnimFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
    window.setTimeout(callback, 1000 / 30);
};//setTimeout是设置延时任务的语句

碰撞检测

矩形碰撞

// 判断四边是否都没有空隙
if (!(rect2.x + rect2.width < rect1.x) &&
    !(rect1.x + rect1.width < rect2.x) &&
    !(rect2.y + rect2.height < rect1.y) &&
    !(rect1.y + rect1.height < rect2.y)) {
    // 物体碰撞了
}

圆形碰撞

//用到勾股定理
var dx = circle2.x - circle1.x;
var dy = circle2.y - circle1.y;
var distance = Math.sqrt((dx * dx) + (dy * dy));
if (distance < circle1.radius + circle2.radius) {
  // 两个圆形碰撞了
}