本文主要包含HTML5,Canvas等相关知识,林寿山 希望在学习及工作中可以帮助到您
1. Canvas元素
以下html代码定义了一个canvas元素。
- <!DOCTYPE html>
- <html>
- <head>
- <title>Canvas快速入门</title>
- <meta charset="utf-8"/>
- </head>
- <body>
- <div>
- <canvas id="mainCanvas" width="640" height="480"></canvas>
- </div>
- </body>
- </html>
通过以下Javascript语句访问canvas元素：
- //DOM写法
- window.onload = function () {
- var canvas = document.getElementById("mainCanvas");
- var context = canvas.getContext("2d");
- };
- //jQuery写法
- $(document).ready(function () {
- var canvas = $("#mainCanvas");
- var context = canvas.get(0).getContext("2d");
- });
- //接下来就可以调用context的方法来调用绘图API
2. 基础API
2.1 坐标系统
Canvas 2D渲染上下文采用平面笛卡尔坐标系统，左上角为原点(0,0)，坐标系统的1个单位相当于屏幕的1个像素。具体如下图：
2.2 绘制基本图形
2.2.1 矩形
- //绘制一个填充矩形
- context.fillRect(x, y, width, height)
- //绘制一个边框矩形
- context.strokeRect(x, y, width, height)
- //清除一个矩形区域
- context.clearRect(x, y, width, height)
2.2.2 线条
绘制线条与绘制图形有一些区别，线条实际上称为路径。要绘制一条简单的路径，首先必须调用beginPath方法，接着调用moveTo设置路径的起点坐标，然后调用lineTo设置线段终点坐标（可多次设置），再调用closePath完成路径绘制。最后调用stroke绘制轮廓（或调用fill填充路径）。以下为例子：
- //示例
- context.beginPath(); //开始路径
- context.moveTo(40, 40); //移动到点(40,40)
- context.lineTo(300, 40); //画线到点(300,30)
- context.lineTo(40, 300); //画线到点(40,300)
- context.closePath(); //结束路径
- context.stroke(); //绘制轮廓
- //或者填充用context.fill();
2.2.3 圆形
Canvas实际上并没有专门绘制圆形的方法，可以通过画圆弧来模拟圆形。由于圆弧是一种路径，所以画圆弧的API应该包含在beginPath和closePath之间。
2.3 样式
2.3.1 修改线条颜色