canvas绘制简单图形

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>

html Code

 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 }

JS Code

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 }

View Code

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 }

View Code

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:纵坐标（坐标相对于浏览器的左上角） width:图形宽度 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";设置文字相对于纵坐标的位置。

posted @ 2016-01-26 12:52 晨落梦公子阅读(387) 评论(0) 编辑收藏举报

晨落梦公子

canvas绘制简单图形

公告