DrawRectangle

最新推荐文章于 2023-12-25 09:53:08 发布

dg_2018

最新推荐文章于 2023-12-25 09:53:08 发布

阅读量343

点赞数

分类专栏： WebGL

WebGL 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Draw a blue rectangle (canvas version)</title>
</head>
<body οnlοad="main();">
<canvas id="example" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
<script type="text/javascript" src="/WebGL/js/DrawRectangle.js"></script>
<script>
</script>
</body>
</html>

function main(){
   //Retrieve the <canvas> element 获取<canvas>元素
   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 a blue color 设置填充颜色为蓝色
ctx.fillRect(120,10,150,150); //Fill a rectangle with the color 使用填充颜色填充矩形
}

//译者注 : context, 或译 “绘图环境”。