学习WebGL:从HTML5开始
在html5出现以前,要在页面显示图像,只能使用img标签,不过这个标签显示的图像是静态的,无法交互。
html5新引入的canvas标签,结合javascript,可以在网页上实时渲染绘制图像。
一个简单的例子,绘制一个红色填充的矩形和一个绿色边框的矩形:
<!DOCTYPE html> <html lang='zh-cmn-Hans'> <head> <meta charset='utf-8' /> <title>HTML5 - CanvasL</title> </head> <body> <h1>HTML5 - Canvas</a></h1> <canvas id='canvas' width='600' height='600'></canvas> <script type="text/javascript"> window.onload = function(){ init(); } function init(){ var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); //获取canvas绘图上下文 ctx.fillStyle = '#f00'; //设置填充颜色,也可以使用:'rgba(255,0,0,1)','red' ctx.fillRect(10, 10, 150, 200); //绘制填充矩形 ctx.strokeStyle='#0f0'; //设置轮廓颜色 ctx.strokeRect(10, 10, 200, 150); //绘制矩形 } </script> </body> </html>