<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Example</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
// 获取 canvas 元素
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 绘制一个矩形
ctx.fillStyle = "#FF0000"; // 设置填充颜色为红色
ctx.fillRect(0, 0, 150, 75); // 在 (0,0) 位置绘制宽 150px,高 75px 的矩形
// 绘制一条线
ctx.beginPath(); // 开始路径
ctx.moveTo(50, 50); // 移动到起点 (50,50)
ctx.lineTo(200, 50); // 画线到终点 (200,50)
ctx.stroke(); // 绘制线条
// 绘制一个圆形
ctx.beginPath();
ctx.arc(240, 188, 40, 0, 2 * Math.PI); // 在 (240,188) 位置绘制半径为 40 的圆
ctx.fillStyle = "green"; // 设置填充颜色为绿色
ctx.fill(); // 填充圆形
ctx.lineWidth = 5; // 设置线条宽度
ctx.strokeStyle = "blue"; // 设置线条颜色为蓝色
ctx.stroke(); // 绘制圆形的边框
</script>
</body>
</html>
<canvas>
标签:用于在网页上绘制图形。width
和 height
属性定义了画布的尺寸。getContext("2d")
:获取 2D 绘图环境,允许你在画布上绘制图形。fillRect(x, y, width, height)
:绘制一个填充的矩形,参数分别为矩形左上角的坐标、宽度和高度。beginPath()
:开始一条新的路径。moveTo(x, y)
:将绘图游标移动到指定的坐标点。lineTo(x, y)
:从当前点绘制一条直线到指定的坐标点。stroke()
:绘制路径(例如线条或形状的边框)。arc(x, y, radius, startAngle, endAngle)
:绘制一个圆弧,参数分别为圆心坐标、半径、起始角度和结束角度。fill()
:填充路径(例如圆形或矩形)。lineWidth
和 strokeStyle
:设置线条的宽度和颜色。这段代码展示了如何使用 HTML5 <canvas>
标签绘制矩形、线条和圆形,并设置了不同的颜色和样式。
上一篇:nav在html中是什么意思
下一篇:html5+
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站