canvas调用webgl绘制图形图像

最新推荐文章于 2024-07-30 18:00:16 发布
最新推荐文章于 2024-07-30 18:00:16 发布
阅读量2.1k 收藏 1
点赞数
文章标签： webgl
<!DOCTYPE html>
<html>
<head>
    <meta lang="en">
    <meta charset="UTF-8">
    <title>WebGL study</title>
    <link href="style/style.css">
    <script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<canvas id="canvas" width="200px" height="200px"></canvas>
</body>
<script>


/**
 * Created by houbingshuai on 2016/12/3.
 */
window.onload = function () {


    //顶点着色器程序
    var VSHADER_SOURCE =
        "void main() {" +
            //设置坐标
        "gl_Position = vec4(0.0, 0.0, 0.0, 1.0); " +
            //设置尺寸
        "gl_PointSize = 10.0; " +
        "} ";


    //片元着色器
    var FSHADER_SOURCE =
        "void main() {" +
            //设置颜色
        "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +
        "}";
    //获取canvas元素
    var canvas = document.getElementById('canvas');
    //获取绘制二维上下文
    var gl = canvas.getContext('webgl');
    if (!gl) {
        console.log("Failed");
        return;
    }
    //编译着色器
    var vertShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertShader, VSHADER_SOURCE);
    gl.compileShader(vertShader);


    var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragShader, FSHADER_SOURCE);
    gl.compileShader(fragShader);
    //合并程序
    var shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertShader);
    gl.attachShader(shaderProgram, fragShader);
    gl.linkProgram(shaderProgram);
    gl.useProgram(shaderProgram);


    //绘制一个点
    gl.drawArrays(gl.POINTS, 0, 1);
}






</script>
</html>
最强面试者
关注
JavaScript中WebAssembly与WebGL如何结合实现高性能图形渲染
ElvaRaleign的博客
04-18 864
WebAssembly的出现极大地提高了Web应用的性能，使得一些原本只能在本地应用中实现的复杂计算任务也可以在Web上高效完成。随着Web技术的不断发展，我们可以期待WebAssembly和WebGL在未来会有更多的应用场景和优化空间，为Web应用带来更加出色的视觉体验和交互性能。结合WebAssembly和WebGL，可以实现更高效的图形渲染。由于WebGL是基于OpenGL ES 2.0的，其API相对底层且复杂，对于非专业图形开发者来说，学习和使用WebGL可能会面临一定的难度。
WebGL学习系列-第一个程序
yanyan19880509的专栏
02-18 1316
本篇学习第一个WebGL程序——画一个点，通过此程序来理解WebGL程序的结构，这是所有后续知识的开端。画一个点先看一下效果图： 为了画这么一个点，在WebGL可不太简单，它会涉及到WebGL上下文以及着色器的概念，不要着急，咱们慢慢来理解。WebGL上下文学过Canvas的同学应该都知道，想要在浏览器中使用Canvas画图，需要先取得一个上下文，就像创建一个场景一样，有了场景才可以绘制。在W
WebGL-第一个WebGL程序
ytuyzh的博客
03-17 242
HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>canvas</title> </head> <body onload="main()"> <canvas id="we...
计算机图形学——实验一 WebGL基本图形绘制
最新发布
weixin_50780569的博客
07-30 543
任务3：对canvas画布进行onclick事件绑定，发生点击事件后，通过点击事件的坐标，计算出点击的点在画布中的坐标{ (x,y)|x∈[-1,1]，y∈[-1,1] }，并将该点记录到indices数组中。设置三个改变颜色的button，点击后会向着色器程序传入对应的颜色数据，并进行重新绘制。注：由于只有实验相关的文档，给我提供文档的人没有给我相关的示例代码，因此所有的程序都是自己编写，非常可能与示例程序有较大出入，但是实现的原理基本一致。任务1：最基本的webgl在canvas上进行图形绘制操作。
第一个webgl程序
Monkeyfree
08-10 156
<!DOCTYPE html> <html> <head> <title>WebGl-Lesson1</title> <meta charset="utf-8"> <script type="text/javascript"> var webgl=null; function init() { var canvas=document.getElementById('mycanvas'); //获得w
WebGL（四）—— 第一个WEBGL程序
qq_51550750的博客
03-17 287
WebGL（四）—— 第一个WEBGL程序 绘制一个点 HTML代码： 着色器代码 JS代码
第一个WEBGL脚本程序
oLiLaiYing的博客
06-30 431
1.场景 scene 是所有物体的容器 var scene = new THREE.Scene();  //创建场景 2.相机 camera 眼睛位置，有多种，(透视相机) var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);// 透视相机 3、渲染器
调用HTML5的Canvas API绘制图形的快速入门指南
09-28
通过<canvas>标签定义一个画布区域，并通过JavaScript操作该区域绘制图形。例如： ```html <!DOCTYPE html> <title>Canvas快速入门 <canvas id="mainCanvas" width="640" height="480"></canvas> ``` ...
javascript Canvas图形绘制各类图形动画等示例
02-21
通过JavaScript，我们可以获取到这个元素的2D渲染上下文（`canvas.getContext('2d')`），然后调用其提供的方法进行绘制。 在图形绘制方面，Canvas提供了多种方法，如`fillRect()`用于绘制矩形，`arc()`用于绘制圆或...
html5 canvas+webgl实现彩虹喷泉粒子喷射动画特效.zip
11-02
Canvas是HTML5中的一个绘图元素，它提供了一个二维图形绘制接口，允许通过JavaScript动态地在网页上绘制图形。开发者可以通过Canvas API调用各种绘图方法，如`fillRect`、`strokePath`、`beginPath`等，来绘制线条、...
canvas、threejs动画绘制效果
08-04
Canvas是HTML5中的一个标准元素，它允许开发者通过JavaScript直接在浏览器上绘制图形，而Three.js则是一个基于WebGL的3D库，极大地简化了在浏览器中构建复杂3D场景的工作。 首先，Canvas是HTML5的一个核心特性，...
WebGL绘制一个点-第一个WebGL程序
u014291990的博客
11-08 3195
WebGL绘制一个点 通过WebGL可以渲染出来各种各样酷炫的3D效果，但是考虑到WebGL复杂性，为了大家降低初学难度，下面的代码仅仅在Canvas画布上绘制了一个点，对WebGL的整个绘图渲染流程进行了完整的演示，麻雀虽小，五脏俱全。 学习建议 本节课你不需要刻意去记忆具体知识，对于暂时不理解的小细节可以跳过，先有个整体印象即可，可以把全部代码复制到编辑器中，根据课程对相关知识模块的介绍，尝试...
webGL入门（1）创建第一个webGL程序
cg870429的专栏
11-27 331
webGL入门（1）创建第一个webGL程序 createScense.html文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>create Scense</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </styl
JavaScript第十五章节 使用Canvas绘图（WebGL）
仇益阳的博客
11-06 1086
WebGL WebGL 是针对 Canvas 的 3D 上下文。与其他 Web 技术不同，WebGL 并不是 W3C 制定的标准，而 是由 Khronos Group 制定的。其官方网站是这样介绍的：“Khronos Group 是一个非盈利的由会员资助的 协会，专注于为并行计算以及各种平台和设备上的图形及动态媒体制定无版税的开放标准。” Khronos Group 也设计了其他图形处理 API...
WebGL（三）——学习Canvas及简单图形绘制
qq_51550750的博客
03-16 1516
WebGL（二）——学习Canvas及简单图形绘制 Canvas简介 canvas是HTML5新增的一个可以使用javascript脚本在其中绘制图像的ＨＴＭＬ元素（容器），它可以用来制作图像、动画，甚至可以进行实时视频处理和渲染，也包括我们的三维影像。 更多关于Canvas的学习资料可以关注公众号“小东方不败”进行获取 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
如何在WebGL中画图
weixin_26750481的博客
09-10 618
Original article: https://aralroca.com/blog/how-to-draw-gears-in-webgl 原始文章: https : //aralroca.com/blog/how-to-draw-gears-in-webgl In this article we continue what we started in “First steps in WebG...
三、在Canvas中使用WebGL
weixin_30521649的博客
12-23 477
　　上一篇介绍了如何在<canvas>标签中绘制2d图形；接下来，我们看看如何在<canvas>中使用WebGL来绘制3d图形。 　　我们开始编写一个最短的WebGL程序：Hello WebGL;这个程序的功能非常简单，使用指定颜色清空<canvas>标签的绘图区；下图显示了程序运行的效果，清空（用黑色）了<canvas>定义的矩形区域。...
【WebGL】绘制一个点(版本1)
Epps的博客
10-08 1965
在之前的学习中，我们知道了怎么样使用一些简单的WebGL相关函数。现在更进一步来绘制最简单的图形：一个点。 绘制一个点远不是调用一个”draw point”在之前的学习中，比如填充颜色可以用到ctx.fillStyle = "rgba(0, 255, 255, 1.0)";但是，是否绘制一个点也这么简单呢?比如调用一个drawPoint方法就行了。答案是否定的！！！WebGL依赖于一种称为着色器(s
一起学 WebGL：绘制图片
fe_watermelon的博客
05-05 1829
大家好，我是前端西瓜哥。本文为系列文章中的一篇，请先阅读：纹理映射会根据纹理图像，将光栅化后的每个片元（像素点）设置对应颜色值。这些像素也称为。
webgl绘制气象雷达图
06-26
WebGL是一种基于OpenGL ES的JavaScript API，它允许在Web浏览器上实时渲染交互式的3D图形。绘制气象雷达图通常涉及到数据可视化和动态图形渲染，下面是WebGL绘制气象雷达图的基本步骤： 1. **设置环境**：首先，确保你的HTML页面包含一个`<canvas>`元素，这是WebGL的主要画布。 2. **初始化WebGL上下文**：使用`WebGLRenderingContext`对象创建一个 WebGL 渲染器，并将其绑定到`<canvas>`。 3. **加载数据**：获取气象雷达的数据，包括雷达回波强度、方位角等，这些数据将以某种格式（如JSON或二进制）存在。 4. **建立顶点缓冲对象（VBO）**：将几何数据（例如雷达图像的像素点位置）转换为顶点数组，然后将其上传到GPU。 5. **设置着色器**：编写并编译顶点着色器（VS）和片段着色器（FS），以便处理颜色映射和光照计算。 6. **纹理映射**：如果雷达图有颜色变化，可以使用纹理贴图来表示雷达回波的不同强度。 7. **绘制模型**：使用WebGL提供的API（如`drawArrays`或`drawElements`）调用几何体数据，将气象雷达图绘制到屏幕上。 8. **动画和更新**：如果雷达数据是动态的，你需要定期（如每秒）更新顶点缓冲和纹理，并调用`requestAnimationFrame`来实现动画效果。 9. **处理用户交互**：允许用户缩放、平移或选择雷达图，可能需要事件监听器和变换矩阵来响应这些交互。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值