canvas绘图篇：
canvas绘制矩形：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>绘图</title> 6 <script type="text/javascript" src="Rec.js"></script> 7 <style type="text/css"> 8 body{ 9 margin: 0; 10 padding: 0; 11 } 12 </style> 13 </head> 14 <body onload="draw('canvas');"> 15 <canvas id="canvas" width="500" height="430"></canvas> 16 </body> 17 </html>
1 /** 2 * Created by Administrator on 2016/1/24. 3 */ 4 function draw(id){ 5 var canvas = document.getElementById(id);//获取canvas元素 6 var contest = canvas.getContext('2d'); //获取上下文 7 8 contest.fillStyle = "block"; //设置画布的填充样式 9 contest.strokeStyle="white"; //设置绘制对象的边框颜色 10 11 contest.lineWidth =5;//设置画笔宽度 12 13 contest.fillRect(0,0,450,300); //fill填充 14 contest.strokeRect(20,20,150,200); //stroke描边 15 16 }
1 <style type="text/css"> 2 body{ 3 margin: 0; 4 padding: 0; 5 } 6 </style>
这段代码保证了画布与浏览器之间无缝契合。
canvas绘制圆形：
html代码不再赘述。
1 /** 2 * Created by Administrator on 2016/1/24. 3 */ 4 function draw(id){ 5 var canvas = document.getElementById(id); 6 var contest = canvas.getContext('2d'); 7 contest.fillStyle = "#f1f2f3"; 8 contest.fillRect(0,0,400,400); 9 for(var i=1;i<=10;i++) { 10 contest.beginPath(); 11 contest.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true); 12 contest.closePath(); 13 contest.fillStyle = "rgba(255,0,0,0.25)"; 14 contest.fill(); 15 if(i%2==0){ 16 contest.strokeStyle = "#FF3300"; 17 contest.stroke(); 18 } 19 } 20 }
canvas绘制文字：
html代码不再赘述。
1 /** 2 * Created by Administrator on 2016/1/26. 3 */ 4 function draw(id){ 5 var canvas = document.getElementById(id); 6 var contest = canvas.getContext('2d'); 7 contest.fillStyle = "green"; 8 contest.fillRect(0,0,800,300); 9 contest.fillStyle = "red"; 10 contest.strokeStyle = "block"; 11 contest.font = "bold 40px '汉仪嘟嘟体简','汉仪雪峰体简','华康宝风体繁','微软雅黑'"; 12 contest.textBaseline = "top"; 13 contest.textAlign = "center"; 14 contest.fillText('晨落梦公子',0,0); 15 contest.strokeText('晨落梦公子',0,40); 16 }
JS绘图说明：
1、先建立函数，函数为 id。格式：function draw (id) {}
2、定义canvas变量，并获取。格式：var canvas = document.getElementById(id);这里无引号
3、定义canvas变量，并获取。格式：var contest = canvas.getContest('2d');注意这里的单引号
4、绘制图形。无外乎两种:fill（填充）和stroke（描边）。另外有画笔设置。
另外解释相关函数：
绘制矩形时有：
fillStyle = "颜色值" 颜色值可以是16位进制、RGB(A)或英语；
同理有strokeStyle = "颜色值"；
fillRect(x,y,width,height) x:横坐标 y:纵坐标（坐标相对于浏览器的左上角） 图形宽度 height:图形高度；
同理有strokRect(x,y,width,heigth)；
另外有画笔宽度设置：linewidth = 数值。
绘制圆形时有：
设置开始路径，绘图，设置结束路径。
这里解释 contest.arc(x, y, ridus,sAngle,eAngle,counterclockwise)
x:圆心的横坐标 y:圆心的纵坐标 ridus:圆的半径
sAngle:开始角度 eAngle:结束角度
counterclockwise:true:顺时针绘图；false：逆时针绘图。
小知识点，颜色值设定时可设置为RGB(A)。格式：fillStyle = "rgba(255,255,255,0.25)"
依次为红绿蓝，a指的是alpha(透明度) ，数值范围是0~1。
fill():填充路径。
绘制文字时有：
字体设置格式：font = "font-weight font-size font-family"（注意中间用空格隔开）
font-weight可选样式有：normal（正常）,bold（粗体）,bolder（更粗）,lighter（更细）,数值100~900（默认是400）。
font-size可选样式有：数值px。
font-family可选样式有：本地的字体库。如果写多个格式：'字体1','字体2','字体3'，程序执行时会从左到右依次寻找，找到则停止，并用找到作为当前字体。
另外有：1）contest.textBaseline = "top";：设置文字相对于横坐标轴的位置。
2）contest.textAlign = "center";设置文字相对于纵坐标的位置。
