canvas的熟知

最新推荐文章于 2021-11-05 08:58:00 发布

DreamToSetSail

最新推荐文章于 2021-11-05 08:58:00 发布

阅读量529

点赞数

本文链接：https://blog.csdn.net/u011933615/article/details/22201457

版权

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>

</body>

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() 将获取的图像像素信息放回到画布中。

</body>

//获得旧得画布

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

DreamToSetSail

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas的熟知

var canvas=document.getElementById(‘canvas’);//获取canvas对象var cxt=canvas.getContext(‘2d’);//获取画布对象的getContext()方法返回的对象 2d二维坐标绘制线段：开始点：cxt.moveTo(sx,sy); 结束点：cxt.lineTo(ex,ey); 绘制
复制链接

扫一扫