清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>
<!doctype html>
<html>
<head>
<meta html-equiv="context-type" context="text/html,charset=utf-8"></meta>
</head>
<script type="text/javascript">
function draws(id){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext('2d');
ctx.fillStyle='red';
ctx.fillRect(150,0,100,200);
ctx.clearRect(150,0,50,100); //清除部分矩形
ctx.strokeStyle="green"
ctx.strokeRect(300,0,100,200); //绘制边框矩形
ctx.beginPath(); // 开始路径绘制
ctx.moveTo(20, 20); // 设置路径起点
ctx.lineTo(120, 20); // 绘制一条到(120,20)的直线
ctx.lineWidth = 1.0; // 设置线宽
ctx.strokeStyle = "#CC0000"; // 设置线的颜色
ctx.stroke(); // 进行线的着色，这时整条线才变得可见
//画笑脸
ctx.beginPath();
ctx.arc(200,300,50,0,Math.PI*2,true);
ctx.moveTo(230,300); //提笔后落笔位置 moveTo()
ctx.arc(200,300,30,0,Math.PI,false);
ctx.moveTo(185,280);
ctx.arc(180,280,5,0,Math.PI*2,true);
ctx.moveTo(225,280);
ctx.arc(220,280,5,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();
};
</script>
<body onload="draws(canvas)";>
<canvas id="canvas" width="800px" height="800px">
</canvas>
</body>
</html>