HTML5 Canvas 学习日志（一）
HTML5 Canvas 学习日志（一）
介绍
HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。
不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
用到了jquery，
首先引入jquery
<script type="text/javascript" src="jquery-1.11.1.js"></script>
获取context
var canvas = $("#mycanvas");
var context = canvas.get(0).getContext("2d");
画矩形，线条，圆形
<script type="text/javascript">
$(document).ready(function(){
var canvas = $("#mycanvas");
var context = canvas.get(0).getContext("2d");
/*
填充颜色
*/
context.fillStyle = "rgb(0, 102, 153)";
/*
矩形填充
fillRect(x, y, width, height)
x: x坐标
y: y坐标
width: 宽
height: 高
*/
context.fillRect(40, 40, 100, 200); /**/
//线条
context.beginPath(); //开始路径
context.lineWidth=5; //设置线条宽度
context.strokeStyle="rgb(102,0,153)"; //设置线条颜色
context.moveTo(10, 10); //线条起点
context.lineTo(200, 150); //线条终点
context.closePath(); //关闭路径
context.stroke();
//圆形
context.beginPath();
/*
arc(x, y, r, startAngle, endAngle, boolean)
x: x坐标
y: y坐标
r: 半径
startAngle: 起始弧度
endAngle: 结束弧度
boolean: 是否逆时针，true为逆时针，false为顺时针
*/
context.arc(300, 300, 30, 0, Math.PI*2, false);
context.closePath();
context.fill();
});
</script>
</head>
<body>
<canvas id="mycanvas" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
$(document).ready(function(){
var canvas = $("#mycanvas");
var context = canvas.get(0).getContext("2d");
/*
填充颜色
*/
context.fillStyle = "rgb(0, 102, 153)";
/*
矩形填充
fillRect(x, y, width, height)
x: x坐标
y: y坐标
width: 宽
height: 高
*/
context.fillRect(40, 40, 100, 200); /**/
//线条
context.beginPath(); //开始路径
context.lineWidth=5; //设置线条宽度
context.strokeStyle="rgb(102,0,153)"; //设置线条颜色
context.moveTo(10, 10); //线条起点
context.lineTo(200, 150); //线条终点
context.closePath(); //关闭路径
context.stroke();
//圆形
context.beginPath();
/*
arc(x, y, r, startAngle, endAngle, boolean)
x: x坐标
y: y坐标
r: 半径
startAngle: 起始弧度
endAngle: 结束弧度
boolean: 是否逆时针，true为逆时针，false为顺时针
*/
context.arc(300, 300, 30, 0, Math.PI*2, false);
context.closePath();
context.fill();
});
</script>
</head>
<body>
<canvas id="mycanvas" width="500" height="500"></canvas>
</body>