Canvas是什么？

一、Canvas是什么？

　　Canvas即为绘画的地方，允许JavaScript动态的绘制图形，<canvas>标签定义了网页上的绘图区域。有了<canvas>,你就可以使用JavaScript绘制任何你想画的东西。<canvas>提供了一些简单的绘图函数，用来绘制点、线、矩形、圆等等。

　　1.使用<canvas>标签

　　DrawingRectangle.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head> 
 4         <meta charset="utf-8" />
 5         <title>Draw a blue rectangle (canvas version)</title>
 6     </head>
 7     <body onload="main()">
 8     <canvas id="example" width="400" height="400">
 9     Please use a browser that supports "canvas"
10     </canvas>
11     <script src="DrawRectangle.js"></script>    
12     </body>
13 </html>

 　　第8行定义了<canvas>标签，定义了一片400 x 400像素的区域，并用id属性为其指定了唯一的标识符，默认情况下<canvas>是透明的，如果不用javascri在上面画些什么，你是看不到<canvas>的。

　　<body>元素指定了onload属性，告诉浏览器<body>元素加载完成后（也就是页面加载完成后）执行main()函数，并作为JavaScript程序入口。然后浏览器去加载javascri文件，main()函数就定义在其中。

　　DrawRectangle.js

 1 function main(){
 2     var canvas = document.getElementById('example'); //获取<canvas>元素
 3     if(!canvas){
 4         console.log('你的浏览器不支持canvas');
 5         return;
 6     }
 7     
 8     var ctx = canvas.getContext('2d'); //获取绘制二维图形的上下文
 9     
10     ctx.fillStyle = 'rgba(0,0,255,1.0)'; //设置填充颜色为蓝色
11     ctx.fillRect(120,10,150,150); //使用填充颜色填充矩形，参数1、2指定了矩形左上顶点在400x400大小的<canvas>中的坐标，参数3、4指定了矩形的宽度和高度
12 }

　　使用javascript绘制二维或三维图形，需要经过一下三个步骤：

　　　　1. 获取<canvas>元素；

　　　　2. 向该元素请求二维或三维图形的“绘图上下文”；

　　　　3. 在绘图上下文上调用相应的绘图函数，以绘制二维图形。

　　第8行，如果你想要绘制二维图形，就必须指定为2d，这一行执行的结果把上下文存储到了ctx变量中。

　　设置颜色的字符串rgba(0,0,255,1.0)中的rgba指定了r(红色)、g(绿色)、b(蓝色)、a(α：透明度)的值，rbg在0-255之间，a在0.0-1.0之间。

　　<canvas>的坐标系：

　　

 

　　用浏览器运行DrawRectangle.html后可看到如下矩形：

 

 

posted @ 2020-07-07 20:43  Silent_X  阅读(853)  评论(0)    收藏  举报