Laravel  
laravel
文档
数据库
架构
入门
php技术
    
Laravelphp
laravel / php / java / vue / mysql / linux / python / javascript / html / css / c++ / c#

html5 canvas

作者:任光阴风干ゝ影象   发布日期:2025-06-02   浏览:39

<!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> 标签:用于在网页上绘制图形。widthheight 属性定义了画布的尺寸。
  • getContext("2d"):获取 2D 绘图环境,允许你在画布上绘制图形。
  • fillRect(x, y, width, height):绘制一个填充的矩形,参数分别为矩形左上角的坐标、宽度和高度。
  • beginPath():开始一条新的路径。
  • moveTo(x, y):将绘图游标移动到指定的坐标点。
  • lineTo(x, y):从当前点绘制一条直线到指定的坐标点。
  • stroke():绘制路径(例如线条或形状的边框)。
  • arc(x, y, radius, startAngle, endAngle):绘制一个圆弧,参数分别为圆心坐标、半径、起始角度和结束角度。
  • fill():填充路径(例如圆形或矩形)。
  • lineWidthstrokeStyle:设置线条的宽度和颜色。

这段代码展示了如何使用 HTML5 <canvas> 标签绘制矩形、线条和圆形,并设置了不同的颜色和样式。

上一篇:nav在html中是什么意思

下一篇:html5+

大家都在看

静态html源码

ios打开html

colspan在html中是什么意思

xml转html

html时间代码

html2canvas使用

html标题标签是什么

html 换行符号

html中b标签的作用

html美化代码

Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3

Laravel 中文站