canvas基本知识介绍

canvas入门

github项目地址：https://github.com/yangchunyan750/canvas

canvas基本知识

• 什么是canvas
• getContext
• canvas元素绘制图像
  
  • contextfill
  • contextstroke
  • 绘制矩形
  • 清除矩形区域
  • 实心圆
  • 圆弧
  • 绘制线段
  • 线性渐变
  • 径向渐变
  • 图形变形
    
    • 缩放
    • 旋转
    • 平移
  • 图像组合
  • 阴影
  • 图像绘制
  • 图像平铺
  • 图像裁剪
  • 绘制文字

---

canvas基本知识

什么是canvas

canvas是HTML5新定义的标签，通过使用脚本绘制图形。标签只是图形容器，相当于一个画布，canvas元素本身是没有绘图能力的，所有的绘制工作必须在JS内部完成，相当于使用画笔在画布上画画。
默认情况下，没有边框和内容，默认是一个300*150的画布，所以我们创建了之后要对其设置宽高。
我们可以通过html属性width，height来设置canvas的宽高,不可以通过css属性来设置宽高。

getContext()

context是一个封装很多绘图功能的对象，我们在页面中创建一个canvas标签之后，首先使用getContext（）获取canvas的上下文环境，目前getContext()的参数只有2d。

canvas元素绘制图像

canvas创建图形有两种方式

context.fill()

fii()方法填充当前的图像，默认值是黑色，在填充之前要先使用fillStyle设置填充的颜色或者渐变，并且如果路径未关闭，那么fill()方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。

context.stroke()

stroke()方法会实际的绘制出通过moveTo()和lineTo()方法定义的路径，默认值是黑色，在进行绘制前，要设置好绘图的样式。

fillStyle（）//填充的样式
strokeStyle()//边框样式
context.lineWudth()//图形边框宽度

绘制矩形

用canvas绘制一个矩形：

fillRect(x,y,width,height) //实心矩形 strokeRect(x,y,width,height) //空心矩形

可以通过设置fillStyle或者strokeStyle改变其填充颜色 ：

<script type="text/javascript">    var drawing=document.getElementById("drawing");    var context=drawing.getContext("2d");    context.fillStyle="pink";    context.strokeStyle="blue";    context.fillRect(0,0,100,100);    context.strokeRect(120,0,100,100);</script>

效果如下：

清除矩形区域

clearRect(x,y,width,height);

效果如下：

实心圆

context.arc(x,y,radius,starAngle,endAngle,anticlockwise)

效果如下

圆弧

如果不填充颜色，实心圆就是圆弧。

context.beginPath();context.arc(100,100,100,0,Math.PI,true);context.closePath();context.strokeStyle="rgba(0,255,0,0.25)";context.stroke();context.beginPath();context.arc(310,100,100,0,Math.PI,true);context.strokeStyle="red";context.stroke();

效果如下：

• 系统默认在绘制第一个路径的开始点为beginPath
• 如果画完前面的路径没有重新制定beginPath，那么画其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制。
• 每次调用context.fill()的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭的部分。

绘制线段

• moveTo（x,y）:把路径移动到画布中的指定点。不创建线条
• lineTo（x,y）:添加一个新点，然后再画布中创建从该点到最后指定点的线条
• 每次划线都从moveTo的点到lineTo的点

效果如下：

如果没有moveTo，那么第一次lineTo的效果和moveTo一样
每次lineTo后，如果没有moveTo,那么下次lineTo的开始点为前一次lineTo的结束点

我们可以使用canvas的线段绘制各种各样的图形，比如绘制一个六边形：

var  n=0,dx=150,dy=150,s=100;        context.beginPath();        context.fillStyle="pink";        context.strokeStyle="rgb(0,0,100)";        var x=Math.sin(0);        var y=Math.cos(0);        var dig=Math.PI/15*5;        for(var i=0;i<6;i++){            var x=Math.sin(i*dig);            var y=Math.cos(i*dig);            context.lineTo(dx+x*s,dy+y*s);            console.log(x,y);        }        context.closePath();        context.fill();        context.stroke();

绘制30边形

var n = 0;    var dx = 150;    var dy = 150;    var s = 100;    context.beginPath();    context.fillStyle = 'pink';    context.strokeStyle = 'rgb(0,0,100)';    var x = Math.sin(0);    var y = Math.cos(0);    var dig = Math.PI / 15 * 7;    for (var i = 0; i < 30; i++) {        var x = Math.sin(i * dig);        var y = Math.cos(i * dig);        context.lineTo(dx + x * s, dy + y * s);        console.log( x ,y )    }    context.closePath();    context.fill();    context.stroke();

线性渐变

var lg=context.createLinearGradient(xStart,yStart,xEnd,yEnd);
lg.addColorStop(offset,color);

• xstart:渐变开始点x坐标
• ystart:渐变开始点y坐标
• xEnd:渐变结束点x坐标
• yEnd:渐变结束点y坐标
• offset:设定的颜色离渐变结束点的偏移量(0~1)
• color:绘制时要使用的颜色

例如：

var gl=context.createLinearGradient(0,0,0,300);gl.addColorStop(0,"black");gl.addColorStop(1,"red");context.fillStyle=gl;context.fillRect(0,0,300,300);

效果如下：

径向渐变

var rg=context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,rediusEnd);
rg.addColoStop(offset,color);

• xStart：发散开始圆心x坐标
• yStart：发散开始圆心y坐标
• radiusStart：发散开始圆的半径
• xEnd：发散结束圆心的x坐标
• yEnd：发散结束圆心的y坐标
• radiusEnd：发散结束圆的半径
• offset：设定的颜色离渐变结束点的偏移量(0~1)
• color：绘制时要使用的颜色

例如：

var rg=context.createRadialGradient(100,150,0,200,150,200);        rg.addColorStop(0.1,"blue");        rg.addColorStop(1,"pink");        context.fillStyle=rg;        context.beginPath();        context.arc(100,150,100,0,2*Math.PI,false);        context.closePath();        context.fill();

效果如下：

var g1 = context.createRadialGradient(100, 150, 10, 300, 150, 80);        g1.addColorStop(0.1, '#F09819');        g1.addColorStop(0.8, 'red');        g1.addColorStop(1, '#EDDE5D');        context.fillStyle = g1;        context.fillRect(0, 0, 300, 500);

效果如下：

图形变形

缩放

scale(x,y)
x:按x比例缩放
y:按y比例缩放

旋转

rotate(angle)
angle:坐标轴旋转x角度

平移

translate(x,y)
x:坐标原点向x轴方向平移x
y:坐标原点向y轴方向平移y

图形组合

globalCompositeOperation=type
设置或返回新图像如何绘制到已有的图像上。最后的效果取决于 type 的值
type：

• source-over（默认值）:在原有图形上绘制新图形
• destination-over:在原有图形下绘制新图形
• source-in:显示原有图形和新图形的交集，新图形在上，所以颜色为新图形的颜色
• destination-in:显示原有图形和新图形的交集，原有图形在上，所以颜色为原有图形的颜色
• source-out:只显示新图形非交集部分
• destination-out:只显示原有图形非交集部分
• source-atop:显示原有图形和交集部分，新图形在上，所以交集部分的颜色为新图形的颜色
• destination-atop:显示新图形和交集部分，新图形在下，所以交集部分的颜色为原有图形的颜色
• lighter:原有图形和新图形都显示，交集部分做颜色叠加
• xor:重叠飞部分不现实
• copy:只显示新图形

阴影

shadowOffsetX：设置或返回阴影距形状的水平距离（默认值为 0）
shadowOffsetY：设置或返回阴影距形状的垂直距离（默认值为 0） shadowColor：设置或返回用于阴影的颜色
shadowBlur：设置或返回用于阴影的模糊级别（值越大越模糊）

        context.fillStyle="black";        context.beginPath();        context.arc(100,100,10,0,2*Math.PI);        context.shadowColor="black";        context.shadowBlur=10;        context.fill();        context.closePath();

图像绘制

drawImage（）:
向画布上绘制图像、画布或视频

• 在画布上定位图像：context.drawImage(img,x,y);
• 在画布上定位图像，并规定图像的宽度和高度：context.drawImage(img,x,y,width,height);
• 剪切图像，并在画布上定位被剪切的部分：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
• img:规定要是用的图像、画布或视频
• sx:可选，开始剪切的x坐标位置
• sy:可选，开始剪切的y坐标位置
• swidth:可选，被剪切的图像宽度
• sheight:可选，被剪切的图像高度
• x:在画布上放置图像的x坐标位置
• y:在画布上放置图像y坐标位置
• width:可选，要使用的图像的宽度
• height:可选，要使用的图像高度

图像平铺

createPattern(image,type)
type:

• no-repeat:不平铺
• repeat-x：横方向平铺
• repeat-y:纵方向平铺
• repeat：全方向平铺

图像裁剪

clip（）从原始画布上剪切任意形状和尺寸的区域，要先创建剪裁区域，再绘制图像，一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。可以在使用clip（）方法前通过使用save（）方法对当前画布区域进行保存，并在以后任意时间对其进行恢复。

context.rect(0,0,200,200);        context.fillStyle="pink";        context.fill();        context.clip();        context.fillStyle="white";        context.fillRect(10,10,100,100);

绘制文字

fillText(text,x,y);//绘制实心文字
strokeText();//绘制文字描边
textAlign：设置或返回文本内容的当前对齐方式
textBaseLine：设置或返回在绘制文本时使用的当前文本基线
font：设置或返回文本内容的当前字体属性

PinkStar项目的简单理解

将一直位移向上的粒子称为star（总数固定，坐标、半径和透明度随机，匀速上升）
随着鼠标移入产生的粒子称为dot（移动时产生，三个产生连线，向四周移动，达到一定条件消失）

转载：http://blog.csdn.net/sunshine940326/article/details/76572850#%E7%BC%A9%E6%94%BE