初识之-html5 Canvas

这几天暂时没事，初学习一下html5.首先学习的就是canvas.

基础知识：

   1>.创建      <canvas  id="demo1"  width=""  height=""  ></canvas>

   2>.通过画布的上下文进行画图     var context=document.getElementById("demo1").getContext("2d");

   3> 绘图    context.fillStyle("#ccc");        //设置画布的背景色：CSS颜色 图案 渐变色 默认颜色为黑色；必须先于图形         绘制，否则背景色不起作用(十六进制颜色值: "#**")

                   context.strokeStyle("rgb(250,100,106)");  //设置边框样式

                   context.fillRect(0,0,100,100);

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

                   context.clearRect(x,y,width,height);  //清空图形中指定区域的像素

1.创建渐变图形 

   渐变方式分为：线性渐变，径向渐变

    线性渐变：

      1>创建 linearGradeient对象  context.createLinearGradient(xStart,yStrat,xEnd,yEnd);// 1如果yStart,与yEnd相              同则按照水平方向渐变，如果xStart与xEnd相同，则按照沿 y轴进行渐变；如果都不相同，则 按照对角线渐变。

       2>设置渐变的颜色以及偏移量设置  context.addColorStrop(value,color);   //value 渐变位置偏移量 ，其值在0-1之          间；通常为了实现颜色渐变，需要设置两次，第一次渐变开始的颜 色，第二次，结束渐变的颜色

       3> 将创建的 linearGradeient赋值给fillStyle,

  

   

2.在画布中使用路径

  调用绘画的两个方法：moveTo,LineTo() 可以直接绘制直线，调用arc()方法可以绘制指定位置与大小的原型

   1>context.moveTo(x,y)    //将画笔移至指定点并以该点为直线的开始点

   2>context.lineTo(x,y)  //绘制直线，将画笔从指定的坐标与传递的终点坐标直接绘制一条直线，该方法可以重复使用

   3>context.stoke() //在画布中描绘直线路径，最终在画布中展示最终结果

   4> context.beginPath(); // 在调用arc绘制之前，必须调用，声明开始绘制路径；此方法仅对应单次绘制

   5>context.arc(x,y,radiue,startAngle,endAngle,anticlokwise); //x :表示绘制圆形的横坐标；y：表示绘制圆形的纵坐标；radiue:表示绘制圆形的半径，单位为      像          素；startAngle：表示绘制圆形     的开始弧度；endAngle：表示绘制 圆形的结束弧度(Math.PI*2 360度)；anticlokwise：为布尔值，表示是否按照顺时针绘制，        true,顺时针；false，逆时针

   6>context.closePath(); //在绘制图形结束后调用，将绘制图形的路径进行封闭

   7> 对绘制的图形进行填充，描述 

          context.strokeStyle="red";  

          context.lineWidth=2;  

          context.stroke();  //进行描边操作

          context.fillStyle="blue";

          context.fill();  //进行填充

  8>绘制渐变圆形  context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd); //xStart:开始渐变圆心的横坐标；yStartyStart:开始渐变圆心的纵坐       标；radiusStart：开始渐变的圆形半径；xEnd：结束渐变的横坐标；yEnd：结束渐变的纵坐标；radiusEnd：结束渐变的圆形半径; 通过                 addColorStop(value,color)           

      进行添加偏移量与渐变色

   绘制贝塞尔曲线（贝济埃、bezier） context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 

    绘制二次样条曲线 context.quadraticCurveTo(qcpx,qcpy,qx,qy)

<span style="font-size:18px;">//绘制直线 一个直角三角行 坐标(10,10) (10,100) (100,10)
function pathDraw(){
	 var context=document.getElementById("view").getContext("2d");
	 //没有设置strokeStyle时，直线为黑线
     context.strokeStyle="red";
	 context.moveTo(10,10);
	 context.lineTo(50,10); //此处为标示lineTo 可以多次调用
	 context.lineTo(100,10);
	 context.stroke();
	 context.moveTo(10,10);
	 context.lineTo(10,100);
	 context.stroke();
	 context.moveTo(100,10);
	 context.lineTo(10,100);
     context.stroke();
}</span>

//绘制一个带有边框的圆
function circleDraw(){
var context=document.getElementById("view").getContext("2d");
context.fillStyle="yellow"; //进行填充颜色设置
context.strokeStyle="red"; //进行边框颜色设置
context.beginPath();
context.arc(100,100,50,0,Math.PI*2,true);
context.closePath();
context.stroke(); //设置边框
context.fill();//设置填充
}

//绘制一个渐变的圆形
function circleColorDraw(){
var context=document.getElementById("view").getContext("2d");
//设置渐变圆
var gent=context.createRadialGradient(30,30,0,20,20,400);
//颜色
gent.addColorStop(0,"#000");
gent.addColorStop(0.3,"#eee");
gent.addColorStop(1,"#fff");
context.beginPath();
context.arc(125,95,80,0,Math.PI*2,true);
context.closePath();
context.fillStyle=gent;
context.fill();
//设置边框
context.beginPath();
context.arc(125,95,80,0,Math.PI*2,true);
context.closePath();
context.strokeStyle="red";
context.stroke();
}

3.对画布中图形的操作

  变动图形圆点坐标 ：translate(), scale()  rotate()  移动，缩放，旋转

  移动：context.translate(x,y)  //x:将图形圆点的横坐标移动的距离，大于0，向右移，小于0，向左移 ；y:将图形原点     纵坐标移动的距离，大于0，向下移，小于0，向上移；

   缩放：context.scale(x,y)  // x :向横坐标缩放的倍数量，大于0，进行放大，小于0，进行缩放；

   旋转：context.rotate(angle) // angel:表示图形旋转的角度，大于0，顺时针，小于0，逆时针

ps:如果问题，请留言，多多指教