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