0
点赞
收藏
分享

微信扫一扫

vscode,chrome,edge 远程桌面软件界面冻结卡死的情况处理

html5&css&js代码 026 canvas示例

一、代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>编程笔记 html5&css&js HTML Canvas</title>
    <meta charset="utf-8"/>
    <style>
        body {
        display: block;
            color: cyan;
            background-color: teal;
                }

        .container {
            width: 900px; /* 设置容器的宽度 */
            margin: 0 auto; /* 将左右边距设置为自动 */
            line-height: 2;
        }
        h1 {
            text-align: center;
margin-top: 100px;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>这是一个canvas示例</h1>
    <canvas id="myCanvas" width="900" height="900" style="border: 1px solid #000000"></canvas>
</div>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.rect(200, 200, 500, 500);
    ctx.stroke();
    ctx.fillStyle = "#00FF00";
    ctx.fillRect(300, 300, 300, 300);
    ctx.font="50px Arial";
    ctx.fillText("Hello canvas", 300, 90);

    let centerX = canvas.width / 2;
    let centerY = canvas.height / 2;
    let radius = 250;

    // 使用arc()方法绘制圆形
    ctx.beginPath(); // 开始路径
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI); // 绘制圆形
    ctx.closePath(); // 可选,闭合路径,对于填充整个圆是必需的

    // 填充或描边圆形
    // ctx.fill(); // 填充圆形
    // 或者
    ctx.stroke(); // 描边圆形
</script>
</body>
</html>

二、解释

这段HTML代码定义了一个页面,其中包含一个容器和一个canvas元素。通过JavaScript代码,使用canvas绘制了一个矩形、一个填充了颜色的矩形、一个文本以及一个圆形。

<!DOCTYPE html>声明文档类型为HTML5。
<html lang="zh-cn">表示文档语言为中文。
<head>部分包含了标题、字符编码以及CSS样式。
<title>定义了页面标题。
<meta charset="utf-8"/>指定了字符编码为UTF-8。
<style>定义了页面的CSS样式,包括body和.container的样式。
<body>部分是页面的主要内容。
<div class="container">创建了一个容器,设置了它的宽度和居中显示。
<h1>定义了一个标题,设置了居中显示和顶部外边距。
<canvas>创建了一个画布,设置了它的宽度、高度和边框样式。
<script>包含了JavaScript代码,用于在canvas上绘制图形。
const canvas = document.getElementById("myCanvas");获取了canvas元素的引用。
const ctx = canvas.getContext("2d");获取了canvas的2D绘图上下文。
ctx.beginPath();、ctx.rect(200, 200, 500, 500);和ctx.stroke();绘制了一个矩形。
ctx.fillStyle = "#00FF00";、ctx.fillRect(300, 300, 300, 300);在画布上填充了一个绿色的矩形。
ctx.font="50px Arial";、ctx.fillText("Hello canvas", 300, 90);绘制了一个文本。
最后通过ctx.beginPath();、ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);、ctx.closePath();、ctx.stroke();绘制了一个圆形。
举报

相关推荐

0 条评论