<canvas id=”canvas”> </canvas>
var canvas=document.getElementById(‘canvas’);//获取canvas对象
var cxt=canvas.getContext(‘2d’);//获取画布对象的getContext()方法返回的对象 2d二维坐标
绘制线段:
开始点:cxt.moveTo(sx,sy);
结束点:cxt.lineTo(ex,ey);
绘制: cxt.stroke();
自定义绘制虚线:
function slant(sx,sy,ex,ey,len){
var w=ex-sx;
var h=ey-sy;
var length=Math.sqrt(w*w+h*h);
var dashNum=length/len;
for(var i=0;i<dashNum;i++){
if(i%2==0){
cxt.moveTo(sx+i*(w/dashNum),sy+i*(h/dashNum));
}else{
cxt.lineTo(sx+i*(w/dashNum),sy+i*(h/dashNum));
}
cxt.stroke();
}
}
绘制圆角矩形:
cxt.beginPath();//开启路径
cxt.moveTo(100,100);
cxt.lineTo(300,100);
cxt.arcTo(350,100,350,150,50);//切线交点开始,第二个切点结束,半径(顺时针画)
cxt.lineTo(350,300);
cxt.arcTo(350,350,300,350,50);
cxt.lineTo(100,350);
cxt.arcTo(50,350,50,300,50);
cxt.lineTo(50,150);
cxt.arcTo(50,100,100,100,50);
cxt.stroke();
cxt.closePath(); //关闭路径
cxt.save(); //保存当前画布
绘制矩形:
Rect()方法绘制,
fillRect()填充,strokeRect()描边
clearRect()清空画布
绘制圆形:
arc(x,y,半径,圆弧,角度,true顺时针)false逆时针
lineWidth()设置线宽,strokeStyle()绘制样式
//圆心 x、y、半径、弧度、绘制角度、true顺时针(false逆时针)
cxt.arc(100,100,30,Math.PI*2,0,true);
//描边圆形
cxt.strokeStyle='blue';
cxt.lineWidth=30;
cxt.stroke();
//填充
cxt.arc(200,200,50,Math.PI*2,0,false);
cxt.lineWidth=30;
cxt.fillStyle='red';
cxt.fill();
绘制图像:
var img=new Image();
img.src="gameArts.png";
window.οnlοad=function(){
cxt.drawImage(img,0,0);//绘制图像
//no-repeat不平铺 repeat-x 水平平铺 repeat-y 垂直平铺 repeat全平铺
var pattern = cxt.createPattern(img,'no-repeat');
cxt.fillStyle = pattern;
cxt.fillRect(0,0,canvas.width,canvas.height);
//填充字体样式
cxt.fillStyle = 'blue';
cxt.font = '30px 黑体';
cxt.fillText('得分:100',450,50);
}
绘制文字:
strokeStyle 设置描边属性
strokeText(文字,x,y) 绘制描边文字
fillStyle 设置填充属性
fillText(文字,x,y) 填充文字
font 设置字体属性
//描边文字
cxt.strokeStyle='blue';
cxt.font='30px 黑体';
cxt.strokeText('中国',100,100);
//填充文字
cxt.fillStyle='red';
cxt.font='30px 隶书';
cxt.fillText('中国',200,200);
绘制渐变:
渐变分为线性渐变 和 径向渐变(放射渐变)
createLinearGradient(sx,sy,ex,ey)
addColorStop(); 介于0.0-1.0之间的值,表示开始与结束的位置
//创建渐变对象
var linear = context.createLinearGradient(10,10,10,100);
context.fillStyle = linear;
linear.addColorStop(0,'#999999');
linear.addColorStop(0.8,'#CCCCCC');
linear.addColorStop(1,'#FFFFFF');
context.fillRect(10,10,100,100);
绘制视频:
<body>
<video id="video" src="Surface.mp4" width="300px" height="200px">不支持HTML5</video>
<canvas id="canvas" width="600px" height="600px" style="border:1px solid #ccc"></canvas>
</body>
<script>
var video=document.getElementById('video');
var canvas=document.getElementById('canvas');
var cxt=canvas.getContext('2d');
window.οnlοad=function(){
video.play();//开启视频
window.requestAnimationFrame(animate);//参数是一回调函数,W3C标准
//window.oRequestAnimateFrame(animate);//opera浏览器
window.mozRequestAnimationFrame(animate);//火狐浏览器
//window.webkitRequestAnimationFrame(animate);//Chrome浏览器
}
//声明回调函数
function animate(){
//判断是否开启视频
if(!video.ended){
//绘制图像帧
cxt.drawImage(video,0,0,300,200);
//window.webkitRequestAnimationFrame(animate);
window.mozRequestAnimationFrame(animate);
}
}
</script>
绘制时钟:
每次调用 save()方法就会把当前的状态保存起来,
每次使用 restore()方法,就会将上次保存的状态恢复(将当前的图层和原来的整合在一起)。
Translate();//设置该点为原点,
Rotate(Math.PI*2) ;//旋转360度
滤镜:
getImageData() 获取指定区域的图像像素信息,获得的是ImageData对象其中data属性包含了获取的图像信息数组(R G B A)a透明度,255表示不透明。
putImageData() 将获取的图像像素信息放回到画布中。
<script src="filter.js"></script>
<canvas id="oldCanvas" width="300" height="300" style="border:1px dashed blue"></canvas>
<button οnclick="copy()">复制</button>
<canvas id="newCanvas" width="300" height="300" style="border:1px dashed green"></canvas>
</body>
<script>
//获得旧得画布
var oldCanvas=document.getElementById('oldCanvas');
var oldCxt=oldCanvas.getContext('2d');
//获得新得画布
var newCanvas=document.getElementById('newCanvas');
var newCxt=newCanvas.getContext('2d');
var img=new Image();
img.src="xindele.jpg";
window.οnlοad=function(){
//将图片画到旧画布里
oldCxt.drawImage(img,0,0);
}
//获得指定区域的图像的像素信息
function copy(){
/***
获取指定区域的图像像素信息,获得的是ImageData对象其中data属性包含了获取的图像信息数组(R G B A)
a透明度,255表示不透明
**/
var imgData=oldCxt.getImageData(0,0,300,300);//开始坐标,宽高
//循环获得每个像素点的详细信息(每个像素点包括4个信息)
for(var i=0;i<imgData.data.length;i+=4){
//求平均数
灰色的滤镜 == 将3个像素点的平均值再赋给每一个像素点
Var avg= (imgData.data[i]+imgData.data[i+1]+imgData.data[i+2])/3;
imgData.data[i] = avg;
imgData.data[i+1] = avg;
imgData.data[i+2] = avg;
}
//反向
//gfilter.mirrorProcess(oldCxt, imgData);
//石雕
//gfilter.reliefProcess(oldCxt,imgData);
//模糊
gfilter.blurProcess(oldCxt, imgData);
//将获取的图像像素信息放回到画布中
newCxt.putImageData(imgData,0,0);
}
</script>
裁剪函数:
srcCxt.save();
srcCxt.beginPath();
srcCxt.rect(x-75,y-75,150,150);
srcCxt.clip();//裁剪
srcCxt.drawImage(img,0,0);
srcCxt.stroke();
srcCxt.restore();
将window窗口的坐标转换为canvas画布的坐标:
Function windowToCanvas(element,x,y){
Var box=element.getBoundingClientRect();
Var cx=x-box.left;
Var cy=y-box.top;
Return {x:cx,y:cy};
}
getBoundingClientRect(); 获取left 、top、right、bottom、width、height
自定义:
做动画,基本使用 定时器,HTML5提供了requestAnimationFrame()方法,专门用来制作动画效果的
优点:解决丢帧的问题、节约CPU、电能
//自执行函数,一定义完即执行
window.myAnimation = (function(){
if(window.webkitRequestAnimationFrame){
return window.webkitRequestAnimationFrame;
}
if(window.msRequestAnimationFrame){
return window.webkitRequestAnimationFrame;//谷歌
}
if(window.mozRequestAnimationFrame){
return window.mozRequestAnimationFrame;//火狐:
}
if(window.requestAnimationFrame){
return window.requestAnimationFrame;//W3C的标准
}
If(window.msRequestAnimationFrame){
Return msRequestAnimationFrame;//IE
}
})();
window.opera就是调用opera浏览器函数!
例如:window.opera.version()就是查看opera浏览器版本
window.innerWidth是查看客户机浏览器的有效可视宽度!
但是IE不能用,得用document.documentElement.clientWidth