HTML5使用canvas绘制图形

来源：互联网发布：淘宝直通车的使用规则编辑：程序博客网时间：2024/05/01 23:33

1.绘制图形

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

示例代码如下：

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body>    <script src="app.js"></script></body></html>

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

/** * 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);}

推荐大家一个查看Web API的网站：https://developer.mozilla.org/zh-CN/ 。这是我见过写的最好的文档！

github主页：https://github.com/chenyufeng1991 。欢迎大家访问！

1 1