HTML5使用canvas绘制图形

来源：互联网发布：mysql select 两个表编辑：程序博客网时间：2024/04/28 14:15

1.绘制图形

canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成。

示例代码如下：

（1）新建一个HTML文件，实现代码如下：

[html] view plain copy
 print?
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
</head>  
<body>  
  
    <script src="app.js"></script>  
  
</body>  
</html>  

（2）新建一个JavaScript文件，实现代码如下：

[javascript] view plain copy
 print?
/** 
 * Created by chenyufeng on 15/9/27. 
 */  
var CANVAS_WIDTH = 2000, CANVAS_HEIGHT = 2000;  
var mycanvas,context;  
  
window.onload = function(){  
  
    createCanvas();  
    drawRect();  
  
};  
  
function createCanvas(){  
  
    document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+CANVAS_WIDTH+"\" height=\""+CANVAS_HEIGHT+"\"></canvas>";  
  
    mycanvas = document.getElementById("mycanvas");  
    context = mycanvas.getContext("2d");  
  
}  
  
function drawRect(){  
  
    context.fillStyle = "#FF0000";  
  
    //旋转；  
    //context.rotate(0.1);  
  
    //平移  
    //context.translate(100,100);  
  
    //缩放  
    context.scale(2,2);  
  
    context.fillRect(50,50,100,200);  
  
}  

0 0