HTML5 canvas 画布的建立和描绘一些基本样式

Canvas画布 ：

1.建立 在body中建立canvas画布

<canvas id="canvas" width="400" height="600" style="border: 1px solid;"></canvas>

2.在JavaScript中对画布进行样式设置

  1.获取画布  

var canvas = document.getElementById("canvas");

  2.获取画笔

var context = canvas.getContext("2d"); //画布为2D效果

  3.获取样式

context.strokeStyle = "#0000ff";//边框类型 

context.fillStyle="#ff0000";  //填充类型    

  4.给画布上色（矩形）

context.strokeRect(100,100,200,100);

 context.fillRect(20,20,150,100); //画布的填充位置

4.画布的集中绘画方式

 A  矩形： 得到如上画笔之后

context.strokeStyle = "#0000ff";//边框颜色  

context.fillStyle="#ff0000";  //填充颜色     

context.strokeRect(100,100,200,100);

 context.fillRect(20,20,150,100); //画布的填充位置

B 三角形

   context.moveTo(500,100); //起点

   context.lineTo(500,300); //连线到第二个点

   context.lineTo(700,300); //连线到第三个点

   context.lineTo(500,100); //连线回到起点

   context.lineWidth = 3 ;  //边框宽度

   context.fill();  //三角形填充类型

   context.stroke();  //三角形边框类型

C 圆形

   //样式 边框颜色  0.8 透明度 //圆

   context.strokeStyle = "rgba(255,0,0,0.8)";

   context.beginPath(); 开始

   //画圆的方法  arc参数入下

x y redius startAngle endAngleanticlockwise:顺时针/逆时针

   //x y 为圆心的坐标

   //逆时针： false 顺时针 ：true

    context.arc(200,200,60,0,Math.PI*2,false);

    context.stroke();  //边框类型

D 图片

var image = new Image();

image.src = "gravel.jpg";

image.onload = function(){

//显示图像绘制图片的方法drawImage 参数(图片,x,y,图片宽度，图片高度)

context.drawImage(image,100,100,170,200);

}