Canvas
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="canvas" width="1920" height="1080"> 当前浏览器不支持Canvas，请更换浏览器后再试 </canvas> <!-- 在canvas标签内的内容，会在浏览器不支持canvas时显示（降级处理） --> <script> //画布的原点是以左上角为原点，向下为Y轴正方向，向右为X轴正方向。 window.onload = function () { } </script> </body> </html>
绘制一个线段
var canvas = document.getElementById("canvas"); // canvas.width=1024; //使用js代码来指定画布大小 // canvas.height=768; if (canvas) { var context = canvas.getContext("2d");//获取绘图的上下文环境 context.beginPath(); //状态设置（专业术语） context.moveTo(100, 100);//将画笔移动到100，100这个点 context.lineTo(700, 700);//将画笔从100，100这个点，移动到700，700这个点。以一条直线的方式移动 context.lineTo(100, 700); context.lineTo(100, 100); context.lineWidth = 5; context.closePath();//如果当前点与起始点重合，则什么都不做。
context.fillStyle = "pink" context.fill(); //绘制（专业术语） context.strokeStyle = "#005588"; context.stroke();//将画笔行走过的路径轻拭出来。 context.beginPath(); context.moveTo(50, 50); context.lineTo(70, 70); context.closePath(); context.stroke(); } else { alert("当前浏览器不支持Canvas，请更换浏览器后再试") }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id='ShowVideo' width="1000" height="1500"> 对不起，您的浏览器不支持此特性，请更换浏览器。 <!-- <img src="" alt=''> 可以用图片来替换文字，以用于提示--> </canvas> <script type="text/javascript"> // 在Canvas中绘制矩形一共有3种方法： // 1、fillRect(x, y, width, height)：绘制一个填充的矩形。 // 2、strokeRect(x, y, width, height)：绘制一个矩形的边框。 // 3、clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。 function Draw(){ var canvas = document.getElementById('ShowVideo'); if(!canvas.getContext) return; var ctx = canvas.getContext("2d");//获取2d上下文 ctx.fillStyle = "rgb(200,0,0)";//声明矩形的填充色 ctx.fillRect (10, 10, 55, 50);//绘制一个矩形；前面2个参数表示矩形的坐标，后面两个参数表示矩形的大小 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";//最后一个参数表示透明度 ctx.fillRect (30, 30, 55, 50);//fillRect(x, y, width, height) ctx.strokeRect(10, 70, 100, 50); // 绘制矩形边框 ctx.clearRect(15, 15, 50, 25); } Draw(); // 在Canvas中只支持矩形这一种图形的画法，若是要绘制其他图案，则需要使用路径。 // 使用路径绘制图形的步骤 // 1、创建路径起始点 // 2、调用绘制方法去绘制出路径 // 3、把路径封闭 // 4、一旦路径生成，通过描边或填充路径区域来渲染图形。 //绘制线段 function DrawLine(){ var canvas = document.getElementById('ShowVideo'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); //新建一条path。 ctx.strokeStyle = "rgb(0,118,215)";//声明线条的颜色 ctx.moveTo(500, 50); //把画笔移动到指定的坐标。 ctx.lineTo(850, 100); //绘制一条从当前位置到指定坐标(200, 50)的直线。 //在为画笔设置初始坐标和结束坐标时，需要注意画布的宽度！！！ ctx.closePath();//闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做。 ctx.stroke(); //绘制路径。 } DrawLine(); //绘制三角形 function DrawTriangle(argument) { var canvas = document.getElementById('ShowVideo'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(200, 200); ctx.lineTo(250,200); ctx.lineTo(250,250); // 1、绘制三角形边框： // ctx.closePath();//closePath会将画笔的起始位置和结束位置相连接。 // ctx.stroke();//描边，stroke不会自动closePath()。 // 2、绘制一个填充的三角形： ctx.fill();//填充闭合区域，如果path没有闭合，那么fill()会自动闭合路径。 } DrawTriangle(); //绘制圆弧 // 绘制圆弧有两个方法： //1、arc(x,y,r,startAngle,endAngle,anticlockwise)： //以x,y为圆心，以r为半径，从startAngle弧度开始到endAngle弧度结束。anticlosewise为布尔值，true为逆时针，false为顺时针（默认值） // 1、这里的度数都是弧度。 // 2、0弧度是指x轴正方形。角度与弧度的转换 radians=(Math.PI/180)*degrees //2、arcTo(x1,y1,x2,y2,radius)： //根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。 function DrawArc() { var canvas = document.getElementById('ShowVideo'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(350,350,40,0,Math.PI/2,false); ctx.stroke(); ctx.beginPath(); ctx.arc(400, 400, 40, 0, -Math.PI / 2, true); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.arc(500, 500, 40, -Math.PI / 2, Math.PI / 2, false); ctx.fill(); ctx.beginPath(); ctx.arc(600, 600, 40, 0, Math.PI, false); ctx.fill(); ctx.beginPath(); ctx.moveTo(100, 500);//起始点坐标 //参数1、2：控制点1坐标 参数3、4：控制点2坐标 参数5：圆弧半径 ctx.arcTo(250, 500, 250, 650, 150); //arcTo这个方法可以这样理解。绘制的弧形是由两条切线所决定。第 1 条切线：起始点和控制点1决定的直线。第 2 条切线：控制点1 和控制点2决定的直线。 ctx.lineTo(250, 650) ctx.stroke(); ctx.beginPath(); ctx.rect(50, 50, 10, 10); ctx.rect(200, 50, 10, 10) ctx.rect(200, 200, 10, 10) ctx.fill() } DrawArc(); Canvas中的颜色： fillStyle = color 设置图形的填充颜色。 strokeStyle = color 设置图形轮廓的颜色。 1、color 可以是表示 css 颜色值的字符串、渐变对象或者图案对象。 2、默认情况下，线条和填充颜色都是黑色。 3、如果需要在每个图形上呈现不同的颜色，需要重新为fillStyle或strokeStyle赋值。 Canvas中的线宽： ctx.lineWidth = 20;//默认值是1，只能是正值。 线条末端样式： ctx.lineCap=butt/round/square;(butt：线段末端以方形，round:线段末端以圆形结束,square:在线条尾部再增加一段正方形); 线条与线条相连时，在线条相接的地方的样式： ctx.lineJoin=round/bevel/miter;(默认)（bevel为矩形拐角） 设置线条为虚线： ctx.setLineDash([20,5]); [实线长度, 间隙长度] ctx.lineDashOffset=-0;设置起始偏移量。 绘制文本： ctx.font = "100px sans-serif";//绘制文本样式，这里使用的字符串与css font属性的语法相同。 ctx.fillText("天若有情", 10, 100);//在x,y位置填充指定的文本。 ctx.strokeText("天若有情", 10, 200);//在x,y位置绘制文本边框。 ctx.direction=ltr/rtl/inherit（默认值）//文本方向。 ctx.textBaseline=top/hanging/middle/ideographic/bottom/alphabetic(默认值)//基线对齐选项 ctx.textAlign=end/left/right/center/start(默认值)//文本对齐选项 在Canvas中绘制图片： var img=new Image();//创建一个<img>元素 img.src='myImage.png';//设置图片源地址 ctx.drawImage(img,0,0);//在canvas中的0，0位置绘制图片。 //图片大多都是从网络上加载的，所以如果在使用drawImage方法的时候图片还没有加载完，则什么都不会做。个别浏览器还会报错，因此需要确保img在绘制完成之后再drawImage var img = new Image(); // 创建img元素 img.onload = function(){ ctx.drawImage(img, 0, 0) } img.src = 'myImage.png'; // 设置图片源地址 如果界面上存在<img src="./美女.jpg" alt="" width="300">这样的图片，那么在使用的时候只需要使用var img=document.querySelector('img')就可以了。 drawImage(image, x, y, width, height)//width和height，这两个参数用来控制 当像 canvas 画入时应该缩放的大小。 Canvas中的切片： ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); //前 4 个是定义图像源的切片位置和大小，后 4 个则是定义切片的目标显示位置和大小。 状态的恢复和保存： save()和restore() 每当使用save()的时候，Canvas当前的状态就会被推送到栈中保存。 可以多次调用save()。 绘画状态包括： 1、当前应用的变形（即移动，旋转和缩放）。 2、strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值 3、当前的裁切路径（clipping path）。 var ctx; function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.fillRect(0, 0, 150, 150); // 使用默认设置绘制一个矩形 ctx.save(); // 保存默认状态 ctx.fillStyle = 'red' // 在原有配置基础上对颜色做改变 ctx.fillRect(15, 15, 120, 120); // 使用新的设置绘制一个矩形 ctx.save(); // 保存当前状态 ctx.fillStyle = '#FFF' // 再次改变颜色配置 ctx.fillRect(30, 30, 90, 90); // 使用新的配置绘制一个矩形 ctx.restore(); // 重新加载之前的颜色状态 ctx.fillRect(45, 45, 60, 60); // 使用上一次的配置绘制一个矩形 ctx.restore(); // 加载默认颜色配置 ctx.fillRect(60, 60, 30, 30); // 使用加载的配置绘制一个矩形 } draw(); 变形： ctx.translate(x, y);//x 是左右偏移量，y 是上下偏移量 在做变形之前先保存状态是一个良好的习惯。大多数情况下，调用 restore 方法比手动恢复原先的状态要简单得多。 var ctx; function draw(){ var canvas = document.getElementById('tutorial1'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.save(); //保存坐原点平移之前的状态 ctx.translate(100, 100); ctx.strokeRect(0, 0, 100, 100) ctx.restore(); //恢复到最初状态 ctx.translate(220, 220); ctx.fillRect(0, 0, 100, 100) } draw(); ctx.rotate(angle);//旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。 var ctx; function draw(){ var canvas = document.getElementById('tutorial1'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.fillStyle = "red"; ctx.save(); ctx.translate(100, 100); ctx.rotate(Math.PI / 180 * 45); ctx.fillStyle = "blue"; ctx.fillRect(0, 0, 100, 100); ctx.restore(); ctx.save(); ctx.translate(0, 0); ctx.fillRect(0, 0, 50, 50) ctx.restore(); } draw(); ctx.scale(x,y)————我们用它来增减图形在 canvas 中的像素数目，对形状，位图进行缩小或者放大。 x,y 分别是横轴和纵轴的缩放因子，他们都必须是正值。当x为0.5的时候原本1个像素的内容会缩减一般，如果为2的时候，就会放大一倍。 ctx.transform(a, b, c, d, e, f);//变形矩阵 合成ctx.globalCompositeOperation="type"; ctx.clip();//裁剪路径 裁剪路径的作用是遮罩。只显示裁剪路径内的区域，裁剪路径外的区域会被隐藏。 clip() 只能遮罩在这个方法调用之后绘制的图像，如果是 clip() 方法调用之前绘制的图像，则无法实现遮罩。 var ctx; function draw(){ var canvas = document.getElementById('tutorial1'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(20,20, 100, 0, Math.PI * 2); ctx.clip(); ctx.fillStyle = "pink"; ctx.fillRect(20, 20, 100,100); } draw(); 动画！！！ 动画的基本步骤： 1、清空 canvas 再绘制每一帧动画之前，需要清空所有。清空所有最简单的做法就是 clearRect() 方法。 2、保存 canvas 状态 如果在绘制的过程中会更改 canvas 的状态(颜色、移动了坐标原点等),又在绘制每一帧时都是原始状态的话，则最好保存下 canvas 的状态 3、绘制动画图形这一步才是真正的绘制动画帧 4、恢复 canvas 状态如果你前面保存了 canvas 状态，则应该在绘制完成一帧之后恢复 canvas 状态。 为了执行动画，我们需要一些可以定时执行重绘的方法。 一般用到下面三个方法： setInterval() setTimeout() requestAnimationFrame() </script> </body> </html>
