526互联

HTML Canvas 画布

发布时间 2023-10-03 21:03:36作者: 樱桃树下的约定

 

  HTML <canvas>画布元素用于通过脚本（通常是JavaScript）动态绘制图形。
  <canvas> 画布元素只是图形的容器。您必须使用脚本来实际绘制图形。
  <canvas>有几种用于绘制路径、框、圆、文本和添加图像的方法。

绘制canvas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><canvas></canvas></title>
</head>
<body>
    <canvas id="myCanvas"></canvas>
</body>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#666fff";
    ctx.fillRect(10, 10, 150, 75);
    </script>
</html>
1.找到 Canvas 画布元素
2.使用画布 getContext 内置对象绘制 它具有属性的绘图和方法
3.最后在画布上面画图 fillStyle  
fillStyle 属性可以是CSS颜色、渐变色或图案。默认填充样式为黑色。
fillRect(x,y,width,height) 方法在画布上绘制一个用填充样式填充的矩形:

 canvas 画布坐标

HTML 画布是一个二维网格。
画布左上角坐标是 (0,0)

绘制一条直线

要在画布上绘制直线，请使用以下方法:
moveTo(x,y) - 定义直线的起点
lineTo(x,y) - 定义直线的终点
画真正的直线，必须使用 "ink" 方法之一，如 stroke()。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><canvas></canvas></title>
</head>
<body>
    <canvas id="myCanvas"></canvas>
</body>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.fillStyle = "#666fff";
ctx.fillRect(0, 0, 200, 100);
ctx.lineTo(200, 100);
ctx.stroke();
    </script>
</html>

绘制一个园⚪

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath()
ctx.arc(95, 50, 40, 0, 2 * Math.PI)
ctx.stroke();
beginPath() - 开始一条路径
arc(x,y,r,startangle,endangle) - 创建圆弧/曲线。使用 arc() 创建圆: 将开始角度设置为 0 ，将结束角度设置为 2*Math.PI。 x 和 y 参数定义圆心的 x 和 y 坐标。r 参数定义圆的半径
用 arc() 方法定义一个圆。然后使用 stroke() 方法实际绘制圆

canvas 渐变

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

渐变可以用来填充矩形、圆、线、文本等。画布上的形状不限于纯色。
有两种不同类型的渐变:
createLinearGradient(x,y,x1,y1) - 创建线性渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建径向/圆形渐变
一旦我们有了渐变对象，我们必须添加两个或更多的颜色停止。
addColorStop() 方法指定颜色停止点及其沿渐变的位置。渐变位置可以是0到1之间的任意位置。
要使用渐变，请将 fillStyle 或 strokeStyle 属性设置为渐变，然后绘制形状（矩形、文本或直线）。

 

圆形渐变。用渐变填充矩形

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");


// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

 canvas 画布文本

要在画布上绘制文本，最重要的属性和方法是:
font - 定义文本的字体属性
fillText(text,x,y) - 在画布上绘制"填充"文本
strokeText(text,x,y) - 在画布上绘制文本（无填充）
// 绘制文本
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
//strokeText() 不填充格式文本

// 添加颜色和文本居中
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);

 canvas 图像

<!DOCTYPE html>
<html>
<body>

<p>要使用的图片：</p>

<img id="scream" width="220" height="277"
src="..." alt="图像" >

<p>画布:</p>

<canvas id="myCanvas" width="240" height="297"
style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

<script>
window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("scream");
   ctx.drawImage(img, 10, 10);
};
</script>

</body>
</html>