今天学习了下HTML5的基本知识，用画笔在画布上画了几个东西，效果如图，相关代码如下，注意点总结在末尾；
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <canvas id="can1" width="500px" height="500px" style="border:1px solid red"> </canvas> <script type="text/javascript"> //准备工作 //得到画布 var canvas1=document.getElementById("can1"); //得到上下文引用对象，你可以理解成画笔 var cxt=canvas1.getContext("2d"); //画出一个直线 cxt.moveTo(30,10);//设置点的位置 cxt.lineTo(30,90);//设置第二个点的位置 cxt.stroke();//将这两个点连起来，画出直线 /** *画出一个填充的三角形 */ cxt.beginPath();//开始新的起点 cxt.moveTo(50,10);//设置点的位置 cxt.lineTo(50,90);//设置第二个点的位置 cxt.lineTo(80,90);//设置第三个点的位置 cxt.closePath();//结束一个画的动作，闭合这三个点 //cxt.fill();//实体填充 cxt.stroke();//空心填充 //stroke划线，fill就是填充 //画出一个矩形,四个点的含义，前两个是左上角的点，后面两个分别是宽和高 //strokeRect(x,y,width,height) cxt.strokeRect(100,10,30,80); //画出一个填充的矩形，其颜色是蓝色 cxt.fillStyle="#00ffff"; cxt.fillRect(150,10,30,80); //画出一个圆形arc //六个参数arc(x,y,redius,startAngle,endAngle,counterclockwise) cxt.beginPath();//开始新的起点 //true代表逆时针，false代表顺时针，其实这个无所谓的 cxt.arc(220,30,20,0,360,false); cxt.closePath();//结束一个画的动作 cxt.stroke(); //画出一个填充的圆形arc //六个参数arc(x,y,redius,startAngle,endAngle,counterclockwise) cxt.fillStyle="#ff0000";//红色 cxt.beginPath();//开始新的起点 //true代表逆时针，false代表顺时针，其实这个无所谓的 cxt.arc(280,30,20,0,360,false); cxt.closePath();//结束一个画的动作 cxt.fill(); //画一个图片出来，步骤如下 //1、创建image对象 var img1=new Image(); //2、指定是哪个图片 img1.src="1.png"; //3、加载完毕后，再绘制图片 img1.onload=function(){ cxt.drawImage(img1,30,100,100,90); }
//在画布上写字
var text="牛魔王";
cxt.fillStyle="#0000ff";
cxt.font="30px 华文新魏";//如果输入的字体找不到，那么默认为宋体
cxt.fillText(text,150,150); </script> </body> </html>
先定义了一个画布，在script中获取画笔，用画笔画你想画的东西
注意点：
1、除了线和矩形不需要beginPath（），和closePath（）其他都需要，不然会出一些莫名奇妙的问题
2、stroke划线，fill就是填充
3、颜色的设置要在beginPath（）之前，否则不起作用；
4、.画圆形的时候逆时针和顺时针有时候不太好用，计算设置了0度到360.顺时针和逆时针却不一样，可以正难则反试试；
5、canvas是画布，getcontext（）是画笔；
end.