canvas
一、基本用法
**< canvas width=“200” height=“200” >< / canvas>
<body οnlοad="draw()">
<canvas id="canvas" width="200" height="200" >
浏览器不支持才显示这段文字
</canvas>
<script>
function draw(){
var canvas=document.getElementById("canvas");
if(canvas.getContext)
{
var ctx=canvas.getContext('2d');
语句;
}
else
{
}
}
</script>
< /body>
getContext:用来看浏览器是否支持canvas ,支持了里面的代码才起作用,不支持就显示else里面的代码.
二、2D上下文
1、填充和描边
(1)fillStyle 和 strokeStyle:该属性写的是绘制的颜色。
(2)fillRect 和 strokeStyle:最后绘制矩形
fillRect(x,y,width,height):距离左上角的上边 x px,左边 y px,width,height
clearRect:清除矩形
var canvas=document.getElementById("canvas");
if(canvas.getContext)
{
var ctx=canvas.getContext('2d');
ctx.fillStyle="red";
ctx.fillRect(30,30,100,100);
}
2、绘制路径
变量 . beginPath():开始绘制路径
==arc(x,y,radius,startAngle,EndAngle,是否按逆时针方向计算):==开始角度为0时时三点钟方向,最后一个值为true或false,true:逆时针,false:顺时针
moveTo(x,y):直接移动到(x,y),不绘制路径
lineTo(x,y):绘制直线到(x,y)
’
画完之后,可以用如下属性:
closePath():末尾连接到起点
fill():用fillStyle填充它
stroke():用strokeStyle描边
clip():在路径上创建一个剪切区域
3、绘制文本(fillText、strokeText)
fillText(要绘制的文本字符串,x,y,可选的最大像素宽度);
var ctx=canvas.getContext('2d');
if(ctx.strokeText)
{
ctx.font=" bold 15px Arial";
//textAlign="start,end,left,right,center(建议用前两个值)"
ctx.textAlign="center";
//textBaseline="top,hanging,middle,alphabetic,ideograohic,bottom"
ctx.textBaseline="middle";
ctx.fillText("12",100,20);
}
else{
alert("你的浏览器不支持strokeText");
}
measureText():接受一段字符串,返回的是字符串的宽度
4、变换(通过上下文变换,把处理后的图像绘制在画布上)
方法:
(1)rotate(角度):围绕原点旋转这么多角度
(2)scale(scaleX,scaleY):缩放图像,在X方向乘以scaleX,在Y方向乘以scaleY
(3)translate(x,y):将坐标原点移动到x,y
(4)transfrom(值):直接改变矩阵
window.onload = function(){
var drawing = document.getElementById("drawing");
//make sure <canvas> is completely supported
if (drawing.getContext){
var context = drawing.getContext("2d");
//start the path
context.beginPath();
//draw outer circle
context.arc(100, 100, 99, 0, 2 * Math.PI, false);
//draw inner circle
context.moveTo(194, 100);
context.arc(100, 100, 94, 0, 2 * Math.PI, false);
//move center to (100,100)
context.translate(100, 100);
context.rotate(1);
//draw minute hand
context.moveTo(0,0);
context.lineTo(0, -85);
//draw hour hand
context.moveTo(0, 0);
context.lineTo(-65, 0);
context.stroke();
}
};
5、绘制图像
变量 . drawImage(图片,x,y,width,height);
6、阴影
shadowColor:阴影颜色
shadowOffsetX:x轴的偏移量
shadowOffsetY:y轴的偏移量
shadowBlur:模糊的像素
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;
context.shadowColor = "rgba(0, 0, 0, 0.5)";
//draw a red rectangle
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//draw a blue rectangle
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30, 30, 50, 50);
7、渐变
(1)创建线性渐变
变量 . createLinearGradient(起点的x,起点的y,终点的x,终点的y);:创建渐变对象
addColorStop(0-1一个数,“颜色”);:添加颜色
然后用 fillStyle=grandient;
最后 fillRect(x,y,width,height);
gradient = context.createLinearGradient(30, 30, 70, 70);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
context.fillStyle = gradient;
context.fillRect(50, 50, 50, 50);
(2)创建径向渐变
createRadiaGradient(圆心1x,圆心1y,半径1,圆心2x,圆心1y,半径2);
gradient = context.createRadialGradient(55, 55, 10, 55, 55, 30);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
context.fillStyle = gradient;
context.fillRect(30, 30, 50, 50);
8、模式(重复的图像)
变量 . createPattern(图片,“repeat”);
9、使用图像数据
. getImageData(x,y,width,height);
10、合成
globalAlpha和globaCompositeOperation
(1)globalAlpha:是一个介于0~1之间的数,表示的是透明度
(2)globaCompositeOperation:表示会之后的图像怎么与先绘制的图像结合。
值:
source-over: 默认。在目标图像上显示源图像。
source-atop :在目标图像顶部显示源图像。
source-in: 在目标图像中显示源图像。
source-out :在目标图像之外显示源图像。
destination-over :在源图像上方显示目标图像。
destination-atop :在源图像顶部显示目标图像。
destination-in :在源图像中显示目标图像。
destination-out :在源图像外显示目标图像。
lighter: 显示源图像 + 目标图像。
copy :显示源图像。忽略目标图像。
xor :使用异或操作对源图像与目标图像进行组合。
这里是引用
三、WebGL
WebGL是针对Canvas的3D上下文。
1、类型化数组
1、视图
ArrayBuffer(数组缓冲类型),最常见的是DataView
DataView(ArrayButter,字节偏移量,要选择的字数);
2、WebGL上下文
clearColor():在WebGL之前,一般都会用某种实色清除< canvas>,该属性接受四个参数,分别为红、绿、蓝、透明度
3、视口与坐标
viewport(x,y,width,height);
4、缓冲区
创建缓冲区:createBuffer();
5、错误
WebGL一般不会报错,知道是否报错,可以用gl . getError()
6、着色器
有顶部着色器和片段着色器。使用GLSL编写
7、纹理
调用gl . createTexture()