测试canvas.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas</title><style>#myCanvas {box-shadow: 6px 9px 80px 13px rgba(0,0,0,.65);margin: 50px 400px;}</style>
</head>
<body><canvas id="myCanvas" width="500" height="500"><img src="不支持canvas标签图片" width="150" height="150"></canvas><video src="img/video.mp4" id="video" width="0" height="0">您的浏览器不支持video标签</video>
</body><script src="js/jquery-2.2.4.min.js"></script><!-- 绘制线段 --><!-- <script src="js/canvas1.js"></script> --><!-- 绘制矩形&&线性渐变--><!-- <script src="js/canvas2.js"></script> --><!-- 绘制圆形&&径向渐变 --><!-- <script src="js/canvas3.js"></script> --><!-- 绘制文字 --><!-- <script src="js/canvas4.js"></script> --><!-- canvas坐标变换,旋转,缩放&&图形移动 --><!-- <script src="js/canvas5.js"></script> --><!-- 绘制贝塞尔曲线 --><!-- <script src="js/canvas6.js"></script> --><!-- 图像重叠处理 --><!-- <script src="js/canvas7.js"></script> --><!-- 绘制图像 --><!-- <script src="js/canvas8.js"></script> --><!-- 视频处理 --><!-- <script src="js/canvas9.js"></script> -->
</html>
绘制线段 canvas1.js
1.开启轨迹路径
2.设置线段的起始点
3.设置线段的终点
4.设置线段的样式
5.开始绘制线段
// file name : canvas1.js
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");//1.开启轨迹的绘制
ctx.beginPath();//2.设置线段绘制的起始点
ctx.moveTo(20,20);//3.设置线段绘制的结束点
ctx.lineTo(20,200);//以上一条线段的终点作为下一条线段的起始点
ctx.lineTo(200,20);//使整个轨迹的绘制形成一个封闭的轨迹
ctx.closePath();//4:设置线段的样式(可选)
ctx.lineWidth = 6;//线条宽度
ctx.lineJoin = "round";var grans = ctx.createLinearGradient(20,0,200,0);
grans.addColorStop(0,"red");
grans.addColorStop(0.5,"yellow");
grans.addColorStop(0.8,"blue");
ctx.strokeStyle = grans;//5:让画笔按照上面设置开始绘制线段
ctx.stroke();//设置线段其他样式/*绘制渐变色（线性渐变）createLinearGradient():四个参数分别对应开始渐变的位置坐标和结束渐变的位置坐标,四个参数决定整个渐变的方向*/
var grans = ctx.createLinearGradient(20,0,200,0);
grans.addColorStop(0,"red");
grans.addColorStop(0.5,"yellow");
grans.addColorStop(0.8,"blue");
/*
ctx.addColorStop(offset,color);
参数1:设定的颜色离渐变结束点的偏移量,值[0,1]
参数2:对应的是一个具体的颜色,是一个字符串类型
*///ctx.strokeStyle = grans;//线条颜色
//ctx.lineCap = "square";//设置线条两端的样式,默认是butt(边界)
//ctx.lineJoin = "miter";
//设置线条交点的样式默认是miter(尖角),除此之外还有bevel(斜角),round(圆角)
绘制矩形&&线性渐变 canvas2.js
// file name: canvas2.js
//canvas矩形的绘制
var myCanvas = document.getElementById("myCanvas");var ctx = myCanvas.getContext("2d");// var grans = ctx.createLinearGradient(0,200,0,300);
// grans.addColorStop(0.2,"red");
// grans.addColorStop(0.5,"yellow");
// grans.addColorStop(0.8,"green");/*区别strokeRect():绘制矩形外边框fillRect():绘制矩形内部区域
*///ctx.strokeStyle = grans;
//ctx.strokeRect(200,200,100,100);// ctx.fillStyle = grans;
ctx.fillRect(200,200,100,100);
绘制圆形&&径向渐变 canvas3.js
// file name: canvas3.js//canvas圆弧的绘制
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");ctx.beginPath();/*var cles = ctx.createRadialGradient(250,250,50,250,50,200);
cles.addColorStop(0,"red");
cles.addColorStop(.5,"yellow");
cles.addColorStop(1,"blue");
*///角度按照顺时针false的方向计算的
ctx.arc(250,250,200,0,Math.PI,false);//ctx.lineTo(250,250);
ctx.closePath();
ctx.lineWidth = 2;
//ctx.fillStyle = cles;ctx.stroke();
绘制文字 canvas4.js
// file name: canvas4.js
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
/** canvas绘制文字*/// var fc = ctx.createLinearGradient(200,0,400,0);
// fc.addColorStop(0,"red");
// fc.addColorStop(.3,"yellow");
// fc.addColorStop(.6,"blue");ctx.font = "50px STKaiTi";//设置文字的阴影//ctx.shadowOffsetX = 4; //设置阴影x方向的偏移
//ctx.shadowOffsetY = 4; //设置阴影y方向的偏移
//ctx.shadowColor = "gray"; //设置阴影的颜色
//ctx.shadowBlur = 5; //设置阴影的模糊程度//ctx.fillStyle = fc;
ctx.fillText("诸葛亮",200,200,200);// ctx.strokeStyle = fc;
// ctx.strokeText("诸葛亮",200,200,200);
canvas坐标变换,旋转,缩放&&图形移动 canvas5.js
// file name: canvas5.js
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");/*canvas变换:1.平移2.旋转3.缩放*/ctx.fillStyle = "red";
ctx.fillRect(0,0,100,100);/*
* 1.平移操作只会影响后面图形的位置,
* 但是不会影响平移之前的图形位置
*/
ctx.translate(50,50);//平移分别设置x,y方向的平移量
ctx.rotate(Math.PI/4);//旋转,设置对应的旋转角度,弧度
ctx.scale(0.5,0.5);//缩放,分别设置x,y方向的缩放比例,小于1代表缩小,大于1代表放大
ctx.fillStyle = "blue";
ctx.fillRect(0,0,100,100);/*
*图形的移动
*/// var centerX = 10,centerY = 10;
// var timer = setInterval(function(){
// //清除画布的操作,用来清除canvas标签上面的所有内容
// ctx.clearRect(0,0,myCanvas.width,myCanvas.height);// ctx.beginPath();
// ctx.arc(centerX,centerY,10,0,Math.PI*2,false);
// ctx.closePath();// ctx.fillStyle = "red";
// ctx.fill();// centerX += 1;
// centerY += 1;
// },24);
绘制贝塞尔曲线 canvas6.js
// file name: canvas6.js
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");/*绘制贝塞尔曲线ctx.quadraticCurveTo():绘制二次贝塞尔曲线,拥有四个参数参数1,2代表曲线的起点和终点之间点的坐标,参数3,4代表终点坐标bezierCurveTo():绘制三次贝塞尔曲线,拥有六个参数参数1,2,3,4代表曲线起点和终点之间的两个点坐标,参数5,6代表终点坐标*/ctx.beginPath();
ctx.moveTo(20,200);//2次贝塞尔曲线
ctx.quadraticCurveTo(60,20,200,200);
//3次贝塞尔曲线
// ctx.bezierCurveTo(50,100,80,300,200,200);
// ctx.strokeStyle = "blue";ctx.lineWidth = 3;
ctx.closePath();
ctx.stroke();
图像重叠处理 canvas7.js
// file name: canvas7.jsvar myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");ctx.beginPath();
ctx.arc(100,100,50,0,Math.PI*2,false);
ctx.closePath();
ctx.fillStyle = "red";
ctx.fill();/*ctx.globalCompositeOperation的值:source-in:绘制新图中和原图的重叠区域source-out:绘制新图中和原图的未重叠区域destination-in:绘制原图中和新图的重叠区域destination-out:绘制原图中和新图的未重叠区域destination-over:在原有图形下绘制新图形destination-atop:绘制原图中和新图的重叠区域以及新图中未重叠区域lighter:绘制新图和原图,但是重叠部分做加色处理copy:只绘制新图内容*/ctx.globalCompositeOperation = "destination-over";ctx.beginPath();
ctx.arc(150,100,50,0,Math.PI*2,false);
ctx.closePath();
ctx.fillStyle = "green";
ctx.fill();
绘制图像 canvas8.js
// file name: canvas8.js
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");//创建图片的对象(img对象)
var img = new Image();
img.src = "img/2.jpg";img.onload = function(){/*drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight);drawImage(img,x,y,width,height):将图片绘制到对应的canvas标签上面.该方法的参数共分为三种1.含有三个参数:参数1代表绘制的参考图片,参数2,3代表图片绘制的初始位置.2.含有5个参数:参数1,2,3同上,参数4,5代表图片在canvas中绘制的区域范围.3.含有9个参数:参数1,代表绘制参考图片,参数2,3,4,5代表从参考图片中截取的图片范围参数6,7,8,9代表将截取的图片绘制在canvas中的时候对应的绘制范围.*/ctx.drawImage(img,0,0);
// ctx.drawImage(img,0,0,500,600);
// ctx.drawImage(img,200,100,100,100,20,20,200,200);//获取canvas标签上指定区域的像素点/*getImageData():获取指定区域的图片的像素点,返回值是一个ImageData类型的对象.imagePoints.data返回一个一维数组数组中存的值是R,G,B,A,R,G,B,A....putImageData():将修改后的像素点插入到canvas中对应的位置.共7个参数参数1:修改之后的像素点参数2,3:插入的初始位置坐标参数4,5,6,7:对应需要插入的像素的范围*/var imagePoints = ctx.getImageData(0,0,500,500);var datas = imagePoints.data;for(var i = 0;i < datas.length;i+=4){var sum = datas[i]+datas[i+1]+datas[i+2];datas[i] = 255-datas[i];datas[i+1] = 255-datas[i+1];datas[i+2] = 255-datas[i+2];}ctx.putImageData(imagePoints,0,0,0,150,500,350);/*toDataURL():将canvas标签上面的图像转换成对应的图片链接.*/var URL = myCanvas.toDataURL();console.log(URL);//window.location.href = URL;}视频处理 canvas9.js
// file name: canvas9.js
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");var video = document.getElementById("video");
/*requestAnimationFrame():任务的执行根据浏览器自身的频率执行它和setInterval()的区别是:(1)requestAnimationFrame()可以过滤隐藏的标签元素,同时可以监听当前的页面是否切换,如果切换,会自动暂停对应任务的执行,但是setInterval不可以(2)requestAnimationFrame()的执行根据浏览器自身绘制频率执行,但是setInterval()是人为规定时间,因此可能会出现丢帧现象cancelAnimationFrame()取消动画,但是有兼容问题,低版本支持的不好*/
video.oncanplay = function(){video.play();function startDraw(){ctx.drawImage(video,0,0,500,500);window.requestAnimationFrame(startDraw);}startDraw();
}