WebGL Learning （一）绘制一个蓝色矩形

最新推荐文章于 2023-11-08 10:13:55 发布
原创 最新推荐文章于 2023-11-08 10:13:55 发布 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webgl

本文介绍如何使用HTML5的Canvas API在网页上绘制一个蓝色的矩形。通过JavaScript操作Canvas元素并设置其渲染上下文，可以实现基本的图形绘制功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

用canvas绘制一个蓝色矩形，显示在网页上

DrawRectangle.html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Draw a blue rectangle</title>
</head>
<body onload="main()">
<canvas id="example" width="400" height="400">
    Please use a browser that supports "canvas"
</canvas>
<script src="DrawRectangle.js"></script>
</body>
</html>

main()作为JS程序的入口,在下面的JS中实现

DrawRectangle.js:

function main(){
    var canvas = document.getElementById("example");
    if(!canvas){
        console.log("Failed to retrieve the <canvas> element");
        return false;
    }

    //Get the rendering context for 2DCG
    var ctx = canvas.getContext("2d");

    ctx.fillStyle = '#0000ff'; //设置填充颜色为蓝色 用'rgba(0,0,255,1.0)'也可
    ctx.fillRect(120,10,150,150); //填充矩形
}

canvas不直接提供绘图的方法，而是提供叫上下文（context）的机制进行绘图。
canvas.getContext(“2d”)指定上下文类型为二维，来绘制二维图形。同理：3d就是三维图形。

【零基础学WebGL】绘制矩形
发果叁
05-13 713
我们先来看一下，最终实现的效果。。。。 效果看起来真的很简单。一句css的事，还写一篇文章？？？ 别急着走，往下看，有干货 ！！！ 接下来，进入正题，一步步分解在WebGL世界如何绘制一个矩形。 第一步 ：获取WebGL渲染上下文 这里不过多介绍，主要是使用canvas.getContext API，获取webgl上下文。 const createContext = (id: string, width: number, height: number) => { let element: HT
WebGL 技术储备指南
多多
07-02 8964
WebGL 是 HTML 5 草案的一部分，可以驱动 Canvas 渲染三维场景。WebGL 虽然还未有广泛应用，但极具潜力和想象空间。本文是我学习 WebGL 时梳理知识脉络的产物，花点时间整理出来与大家分享。 示例 WebGL 很酷，有以下 demos 为证： 寻找奥兹国 赛车游戏 划船的男孩(Goo Engine Demo) 本文的目标 本文的预期读者是
canvas绘制一个蓝色线条的矩形
hugejihu9的专栏
01-10 449
文章来自：源码在线https://www.shengli.me/h5/555.html     实现效果：        
webgl绘制矩形
Monkeyfree
08-19 217
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>We
WebGL绘制一个矩形
u014291990的博客
11-23 1713
WebGL绘制一个矩形 本文是WebGL电子书的2.2节内容 学习建议 学习本节课，建议先结合注释看看案例源码，对于不熟悉的WebGL API可以在MDN搜索文档，不过刚开始学习，没必要去掌握每一个WebGL API，把主要精力放在理解WebGL的整个渲染流程上面，如果你能建立渲染管线的概念，自然对WebGL系统会有一个基本的认知。 源码体验测试 //类型数组构造函数Float32Array创建顶...
WebGl-8.通过缓冲区绘制多个点
qq_25064691的博客
09-12 327
缓冲区对象： 缓冲区对象是 webgl 系统中的一块存储区，我们可以在缓冲区对象中保存想要绘制的所有顶点的数据，并且可以使用也可以不使用；使用缓冲区对象向顶点着色器传入数据，需要遵守以上五个步骤； 1、创建缓冲区对象 – gl.createBuffer() 2、绑定缓冲区对象 – gl.bindBuffer() 3、将数据写入缓冲区对象 – gl.bufferData() 4、将缓冲区对象分配给一个 attribute变量gl.vertexAttribPointer() 5、开启attribute变量.
HTML5 Canvas/SVG/WebGL在线游戏编程指南
WebGL是HTML5中另一个重要的技术，它是一种能够在网页浏览器中运行的JavaScript API，用于渲染2D和3D图形。通过WebGL，开发者可以利用GPU硬件加速来展示3D图形。它基于OpenGL ES（一个为嵌入式系统设计的图形API），...
【绘图基础】基本图形绘制
计算机绘图不仅包括静态图像的生成，还涉及到图像处理、渲染技术以及图形用户界面的设计等多个方面。理解这些基础概念对开发人员来说至关重要，它能够帮助他们有效地利用各种图形API进行高效编码。 ## 1.1 计算机...
WebGLVolumeRendering, WebGL体绘制容易.zip
09-18
WebGLVolumeRendering, WebGL体绘制容易 WebGL体绘制容易一个非常简单的步骤介绍像素着色器体渲染使用和 ThreeJS 。转到 http://lebarba.com/blog/ 一步教程中的步骤在 GitHub http://www.lebarba.com/WebGL/
Line方法画矩形 VB代码例子.rar
07-10
VB画图例子，Line方法画矩形 VB代码例子，虽然简单，参考学习挺有用的： 　　Private Sub Form_Load() 　　Show 　　x = 150 　　y = 150 　　Line (100, 100)-Step(x, y), QBColor(1), BF '画出第1个蓝色小矩形 　　For i = 2 To 4 　　 Line -Step(x * i, y * i), QBColor(i), BF '依次画出递增矩形 　　Next i 　　For i = 100 To 800 Step 100 　　 Line (4000 - i, 1000 - i)-(4000 i, 1000 i), , B '画嵌套方形 　　Next i 　　End Sub
Webgl入门笔记-画矩形
code for life
05-14 249
本人是三维可视化方向的研究生，最近因为时间比较多，想深入学习下webgl，这边推荐下b站的webgl入门教程。webgl入门视频 代码分为三个部分： 一、shader编写 分为fs和vs <script id="shader-vs" type="x-shader/x-vertex"> attribute vec3 v3Position; void main (void){ gl_Position=vec4(v3Position,1.0); } </
webgl入门-基础矩形绘制
最新发布
weixin_43623808的博客
11-08 253
衔接上一篇代码。
WebGL利用缓冲区绘制几何体（后附three.js写法）
qq_45487080的博客
08-28 696
WebGL利用缓冲区绘制三角形
52 WebGL不使用任何方法绘制矩形
现在学习也不晚
06-22 1056
案例查看地址：点击这里由于上一个项目需要使用多个程序对象，而突然发现自己使用了好长时间的教程内置的方法，缺没有独立的写过相关的方法。故今天自己手动写了一个最原生的矩形。也发现了很多自己的不足，希望自己继续努力。案例代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt;...
c语言输出彩色实心矩形代码
qq_32257509的博客
02-03 337
#include<stdio.h> int main() { int length,width,x,y;//x horizotal axis;y vertical axis printf(“Enter the length:”); scanf("%d",&length); printf(“Enter the width:”); scanf("%d",&width); //for(x=1;x<=length;x++) printf("\033[33;31;6m■\033
我的webgl学习之路（五）用webgl画彩色三角形
七岁
06-19 1881
要想做彩色三角线必须知道uniform、attribute、varying这三个声明；uniform 表示一次渲染过程中保存不变的 attribute 表示是实时在改变的 varying 用来着色器之间的通讯,也就是顶点着色器和片段着色去之间的桥梁还需要注意的是varying 在顶点和片元着色器两个中都声明一个一样的变量;那么它就会自动默认，两个有关系，但并不是相同的；片元着色器中得到的varyi...
GLSL 绘制入门
davidsu33的专栏
12-14 1627
// GLSL01.cpp : 定义控制台应用程序的入口点。 // #include "stdafx.h" #include #include #include #include using namespace std; static const int g_timer_id = 0; static const int g_time_per_frame = 16;//ms #def
使用webgl 绘制一个正方形
06-01
使用 WebGL 绘制正方形需要进行以下步骤： 1. 获取 WebGL 上下文对象 ```javascript const canvas = document.querySelector('canvas'); const gl = canvas....这样就可以在 canvas 中绘制一个红色的正方形了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值