wegGL的第一个小程序
function main() { // Retrieve <canvas> element 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'); // Draw a blue rectangle ctx.fillStyle = 'rgba(0, 0, 255, 1.0)'; // Set color to blue ctx.fillRect(120, 10, 150, 150); //120和10 // Fill a rectangle with the color }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Draw a blue rectangle(canvas version)</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>
使用<canvas>来支持二维图形和三维图形,并不提供方法,使用上下文的机制绘图
ctx=canvas.getContext()的参数指定上下文的类型 ,'2d'或者'3d',将上下文存储到ctx中,
ctx.fillStyle设置要使用的颜色,用这个颜色绘制矩形,
ctx.fillRect(a,b,c,d),前两个参数制定了待绘制矩形顶点在<canvas>中的坐标,后两个制定了矩形的长宽。