学习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>

 

posted on 2017-03-06 16:26  余之乐  阅读(208)  评论(0)    收藏  举报

导航