<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas Demo</title>
<script src="../jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");
//画线
context.strokeStyle = "rgb(20,100,200)";
context.beginPath();
context.moveTo(20,20);
context.lineTo(80,80);
context.closePath();
context.stroke();
//画半圆
context.fillStyle = "#990000";
context.beginPath();
context.arc(50,80,30,0,Math.PI,false);
context.closePath();
context.fill();
//画空心矩形
context.strokeStyle = "rgb(255,0,0)";
context.strokeRect(80,80,80,100);
//画圆
context.fillStyle = "rgb(0,255,0)";
context.beginPath();
context.arc(160,200,20,0,Math.PI*2,false);
context.closePath();
context.fill();
//画实心矩形
context.fillStyle = "rgb(0,0,255)";
context.fillRect(160,220,80,100);
//画实心圆弧
context.fillStyle = "#990000";
context.beginPath();
context.arc(240,290,30,0,Math.PI*0.5,false);
context.closePath();
context.fill();
//绘制文字
var text1 = "Hello World!";
var text2 = " Hello Canvas!";
context.font = "italic 20px serif"; //修改字号和字体,italic是斜体
context.fillText(text1,60,40);
context.font = "20px serif"; //修改字号和字体
context.fillText(text2,160,65);
});
</script>
<style type="text/css">
#myCanvas{
border: 2px solid #ff22ff;
}
</style>
</head>
<body>
<canvas id="myCanvas" height="350" width="350">
<!--code?-->
</canvas>
</body>
</html>
PS: 简单意思一下,东西当然远不止这些! 用canvas画线或其他图形时要注意的一个细节是:创建一个2D渲染上下文时,必须要getContext("2d");之前有.get(0). 为什么? 因为必须强调一点,由于我们使用了JQuery,所以需要调用get方法才能访问DOM中的canvas元素,然后才能够访问Canvas的getContext方法。 需记住:get方法本身与Canvas之间没有任何关系。 知识点补充: 修改颜色用xxxStyle属性(xxx可能是fill 或 stroke等) 修改线条宽度用lineWidth属性