如何使用 Canvas 创建 3D 图形

Posted 2023-05-04

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用 Canvas 创建 3D 图形相关的知识，希望对你有一定的参考价值。

参考技术A 画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：
<canvas id="myCanvas" width="200" height="100"></canvas>
通过 JavaScript 来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript 使用 id 来寻找 canvas 元素：
var c=document.getElementById("myCanvas");
然后，创建 context 对象：
var cxt=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形：
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。
理解坐标
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
画布的 X 和 Y 坐标用于在画布上对绘画进行定位。
转载，仅供参考。本回答被提问者采纳

canvas

canvas基本用法

1.什么是canvas(画布)

　　 <canvas> 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形，例如，它可以用于绘制图形，创建动画。可以使用 <canvas>标签来定义一个canvas元素，使用 <canvas>标签时，建议要成对出现，不要使用闭合的形式。

　　 <canvas>元素具有默认高宽 width: 300px; height: 150px

2.替换内容

　　对于某些不支持HTML元素 <canvas>的较老的浏览器（尤其是IE9之前的IE浏览器）只需要在标签中提供替换内容就可以。支持 <canvas>的浏览器将会忽略在容器中包含的内容，并且只是正常渲染canvas。不支持 <canvas>的浏览器会显示代替内容

3.canvas标签的两个属性

　　 <canvas>标签只有两个属性—— width和height。这些都是可选的。 <canvas>元素默认具有高宽（width： 300px； height：150px）。html属性设置width height时只影响画布本身不影画布内容。css属性设置width height时不但会影响画布本身的高宽，还会使画布中的内容等比例缩放（缩放参照于画布默认的尺寸）。

4.渲染上下文

　　<canvas> 元素只是创造了一个固定大小的画布，要想在它上面去绘制内容，我们需要找到它的渲染上下文。 getContext() 方法是用来获得渲染上下文和它的绘画功能。它只有一个参数，即上下文的格式。

5.canvas模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas模板</title>
    <style>
        canvas { border: 1px solid; }
    </style>
</head>
<body>
    <canvas id="test" width="300" height="300">
        <span>您的浏览器不支持画布元素，请升级或更换浏览器，推荐使用谷歌浏览器</span>
    </canvas>

    <script>

        function draw() {
            var canvasNode = document.querySelector(‘#test‘); // 获取画布

            if (!canvasNode.getContext)  return; // 检测支持性，防止在低版本浏览器报错

            var ctx = canvasNode.getContext("2d"); // 获取画笔

            // 绘制.....
        }

        draw();

    </script>
</body>

</html>

canvas绘制矩形

　　HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径

1.绘制矩形

绘制矩形的三种方法
- fillRect(x, y, width, height) --- 绘制一个填充的矩形（填充色默认为黑色）
- strokeRect(x, y, width, height) --- 绘制一个矩形的边框（默认边框为:一像素实心黑色）
- clearRect(x, y, width, height) --- 清除指定矩形区域，让清除部分完全透明。

　　x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。

　　width和height设置矩形的尺寸。（存在边框的话，边框会在width上占据一个边框的宽度，height同理）