canvas五个绘图方法有哪些

Canvas五个绘图方法

1. 矩形 rect()

矩形是最简单常用的图形之一，通过canvas的rect()方法可以轻松地绘制出矩形。方法语法如下：

context.rect(x, y, width, height);

其中，x和y为矩形的左上角坐标，width和height为矩形的宽度和高度。例如，我们可以使用如下代码绘制一个宽度为100，高度为50，左上角坐标为100，100的蓝色矩形：

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');
context.fillStyle = 'blue';
context.fillRect(100, 100, 100, 50);

运行结果如下：

<canvas id="myCanvas"></canvas>

<script>

var canvas = document.getElementById('myCanvas');

canvas.width = '500';

canvas.height = '500';

var context = canvas.getContext('2d');

context.fillStyle = 'blue';

context.fillRect(100, 100, 100, 50);

</script>

2. 路径 path()

路径是由若干个线条或曲线组成的图形，可以用来绘制一些比较复杂的图形，例如箭头、圆弧和钟表等。path()方法可以创建一个新的路径，然后通过一系列指令绘制出路径，最后将路径进行闭合或者填充。下面是一个简单的例子，绘制出一个带箭头的路径：

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');
context.beginPath();  // 创建新路径
context.moveTo(50, 50);  // 移动到起始点
context.lineTo(150, 50);  // 画一条直线
context.lineTo(150, 100);
context.lineTo(200, 75);
context.lineTo(150, 50);
context.fillStyle = 'red';
context.fill();  // 填充路径
context.closePath();  // 闭合路径
context.beginPath();
context.moveTo(150, 50);
context.lineTo(150, 20);
context.lineTo(180, 50);
context.lineTo(150, 80);
context.lineTo(150, 50);
context.fillStyle = 'black';
context.fill();
context.closePath();

运行结果如下：

<canvas id="myCanvas1"></canvas>

<script>

var canvas = document.getElementById('myCanvas1');

canvas.width = '500';

canvas.height = '200';

var context = canvas.getContext('2d');

context.beginPath(); // 创建新路径

context.moveTo(50, 50); // 移动到起始点

context.lineTo(150, 50); // 画一条直线

context.lineTo(150, 100);

context.lineTo(200, 75);

context.lineTo(150, 50);

context.fillStyle = 'red';

context.fill(); // 填充路径

context.closePath(); // 闭合路径

context.beginPath();

context.moveTo(150, 50);

context.lineTo(150, 20);

context.lineTo(180, 50);

context.lineTo(150, 80);

context.lineTo(150, 50);

context.fillStyle = 'black';

context.fill();

context.closePath();

</script>

3. 圆形或弧形 arc()

arc()方法可以绘制出圆形或弧形，方法语法如下：

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

其中x和y为圆心坐标，radius为圆半径，startAngle和endAngle为起始角度和结束角度，单位为弧度，anticlockwise表示是否逆时针，true表示逆时针，false表示顺时针，默认为false。下面是一个简单的例子，绘制出一个半径为50的圆形：

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');
context.beginPath();
context.arc(100, 100, 50, 0, Math.PI*2);
context.fillStyle = 'green';
context.fill();

运行结果如下：

<canvas id="myCanvas2"></canvas>

<script>

var canvas = document.getElementById('myCanvas2');

canvas.width = '500';

canvas.height = '500';

var context = canvas.getContext('2d');

context.beginPath();

context.arc(100, 100, 50, 0, Math.PI*2);

context.fillStyle = 'green';

context.fill();

</script>

4. 文本 text()

text()方法可以将文本绘制到canvas中，方法语法如下：

context.fillText(text, x, y, maxWidth);

其中text为要绘制的文本，x和y为文本的左下角坐标，maxWidth为文本的最大宽度。下面是一个简单的例子，绘制出一个居中的红色文本：

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');
context.font = '30px Arial';
context.fillStyle = 'red';
context.textAlign = 'center';
context.fillText('Hello canvas', canvas.width/2, canvas.height/2);

运行结果如下：

<canvas id="myCanvas3"></canvas>

<script>

var canvas = document.getElementById('myCanvas3');

canvas.width = '500';

canvas.height = '200';

var context = canvas.getContext('2d');

context.font = '30px Arial';

context.fillStyle = 'red';

context.textAlign = 'center';

context.fillText('Hello canvas', canvas.width/2, canvas.height/2);

</script>

5. 图像 drawImage()

drawImage()方法可以在canvas中绘制图片或者视频画面，方法语法如下：

context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

其中image为要绘制的图片或者视频画面，sx和sy为图片的左上角坐标，sWidth和sHeight为图片的宽度和高度，dx和dy为绘制到canvas的坐标，dWidth和dHeight为绘制到canvas的宽度和高度。下面是一个简单的例子，绘制出一张大小为300 * 120的图片：

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');
var img = new Image();
img.src = 'myImage.png';
img.onload = function() {
    context.drawImage(img, 0, 0, 300, 120);
}

运行结果如下：

<canvas id="myCanvas4"></canvas>

<script>

var canvas = document.getElementById('myCanvas4');

canvas.width = '500';

canvas.height = '200';

var context = canvas.getContext('2d');

var img = new Image();

img.src = 'https://via.placeholder.com/300x120.png?text=My+Image';

img.onload = function() {

context.drawImage(img, 0, 0, 300, 120);

}

</script>