HTML5 Canvas

HTML5 Canvas

准备：   window.onload = function() {      // 获取画布        var myCanvas = document.getElementById("myCanvas");      // 得到2d绘图上下文      var ctx = myCanvas.getContext("2d"); }

 

画线：     /***************************ctx.lineCap=butt***************************************/      // 绘制动作开始      ctx.beginPath();      // 绘制起点      ctx.moveTo(100,100);      // 从起点开始画一条直线到指定的点      ctx.lineTo(300,100);      // 线的宽度用lineWidth指定      ctx.lineWidth = 20;      // 线的颜色由storkeStyle指定      ctx.strokeStyle = "blue";      //直线端点样式，使用lineCap设置，包含3个值：butt（默认），round,square      // 当样式是round/square时，线的长度会增加，增加的长度为线的宽度。      // 每一边增加的长度等于线的宽度/2      //1.ctx.lineCap = "round";//圆角      //2.ctx.lineCap = "square";//方形      //3.ctx.lineCap = "but";//感觉也是方形      // 为所画的线赋予颜色，使其可见，默认黑色。      ctx.stroke();       /****************************ctx.lineCap=round*************************************/     // 因为lineCap是round时长度比butt的多出线的宽度     // 因此为了保证与butt时的长度一致，将起点X+1/2宽度，终点-1/2宽度     ctx.beginPath();     ctx.moveTo(100+(20/2),200);     ctx.lineTo(300-(20/2),200);     ctx.lineCap = "round";     ctx.lineWidth = 20;     ctx.strokeStyle = "red";     ctx.stroke();       /****************************ctx.lineCap=square*************************************/     // 因为lineCap是square时长度比butt的多出线的宽度     // 因此为了保证与butt时的长度一致，将起点X+1/2宽度，终点-1/2宽度     ctx.beginPath();     ctx.moveTo(100+(20/2),300);     ctx.lineTo(300-(20/2),300);     ctx.lineCap = "square";     ctx.lineWidth = 20;     ctx.strokeStyle = "green";     ctx.stroke();

 

画弧线： /****************************画弧线************************************************/ var x = myCanvas.width / 2; var y = myCanvas.height / 2; var radius = 75; var startAngle = 1/2*Math.PI; var endAngle = 2*Math.PI; ctx.beginPath(); ctx.lineWidth = 20; ctx.strokeStyle = "green"; /** * 参数解释： *   x:中心点X *   y:中心点Y *   radius:半径 *   startAngle:起始弧度 *   endAngle：结束弧度 *   最后一个参数：TRUE：画线的方式为逆时针；FALSE：画线的方向为顺时针。 *   实际上取的就是startAngle到endAngle的弧度。 */ ctx.arc(x,y,radius,startAngle,endAngle,false); ctx.stroke();

 

      

二次曲线： /****************************二次曲线************************************************/ ctx.beginPath(); // context point ctx.moveTo(420,200); // control point var controlPoint = [80,180]; // end point var endPoint = [580,400]; ctx.strokeStyle = "#FF3399"; /** * 由一个上下文点、一个控制点、一个结束点来定义。 * 上下文点由ctx.quadraticCurveTo()之前的moveTo()来确定。 * 控制点分别与上下文点和终止点的切线来确定曲线形状。 */ ctx.quadraticCurveTo(controlPoint[0],controlPoint[1],endPoint[0],endPoint[1]); ctx.stroke();

 

      

贝赛尔曲线： /****************************贝赛尔曲线************************************************/ ctx.beginPath(); // context point ctx.moveTo(400,600); var controlPoint1 = [500,100]; var controlPoint2 = [600,630]; var endPoint = [850,650]; ctx.strokeStyle = "#66FFFF"; /** * 由一个上下文点、2个控制点、一个终止点定义。 * 上下文点由ctx.bezierCurveTo()之前的moveTo()来确定。 * 控制点1/2分别与上下文点和终止点的切线来确定曲线形状。 */ ctx.bezierCurveTo(controlPoint1[0],controlPoint1[1],controlPoint2[0],controlPoint2[1],endPoint[0],endPoint[1]); ctx.stroke();

 

      

画路径： /****************************画路径************************************************/ // 路径由多条子路径连接构成，可以使用lineTo,arcTo,quadraticCurveTo,bezierCurveTo画子路径 // 将上一子路径的终点作为下一子路径的上下文点 ctx.beginPath(); ctx.moveTo(350,100); ctx.lineTo(500,700); ctx.quadraticCurveTo(700,300,800,500); ctx.bezierCurveTo(850,600,900,650,960,700); ctx.lineTo(1100,500); ctx.lineWidth = 6; // 线条之间的连接样式使用lineJoin指定，包含：miter(默认),round,bevel。 ctx.lineJoin = "bevel"; ctx.strokeStyle = "#33FF33"; ctx.stroke();

 

      

 

画圆角： /****************************画圆角************************************************/ // 画圆角使用arcTo(controlX,controlY,endX,endY,radius) // 需要一个控制点，一个结束点，圆角半径 ctx.beginPath(); ctx.moveTo(500,500); ctx.arcTo(700,500,900,700,150); ctx.strokeStyle = "#6666CC"; ctx.stroke();

 

      

 

绘制矩形： //画一个矩形，并用蓝色填充(这是用4条线连接的矩形) ctx.beginPath(); ctx.moveTo(700,500); ctx.lineTo(900,500); ctx.lineTo(900,600); ctx.lineTo(700,600); ctx.lineTo(700,500); ctx.strokeStyle = "#336600"; ctx.fillStyle = "blue"; ctx.fill(); ctx.stroke();   // 绘制矩形可以使用rect(x,y,width,height); /** * 参数定义： * x:左上角坐标x * y:左上角坐标y * width:矩形宽度 * height:矩形高度 */ ctx.beginPath(); ctx.rect(600,100,300,200); ctx.strokeStyle = "green"; ctx.fillStyle = "red"; ctx.fill(); ctx.stroke();

 

      

画圆： // 画圆，在上面画弧线的时候我们知道弧线是圆的一部分，那么我们将起始弧度设置为0，终止弧度设置为2PI就得到圆了。 ctx.beginPath(); //ctx.moveTo(300,300); ctx.arc(200,500,150,0,2*Math.PI,false); ctx.strokeStyle = "blue"; ctx.fill(); ctx.stroke();   // 半圆呢？将终止角度设置为起始角度+PI即可。 ctx.beginPath(); ctx.arc(200,700,150,0,Math.PI,false); ctx.fill(); ctx.stroke();

 

      

 

使用线性渐变填充图形： // 使用线性渐变填充图形 ctx.beginPath(); // 1.使用context.createLinearGradient(startX,startY,endX,endY)创建一个线性渐变对象 // 参数：通过这4个参数可以确定一条虚拟线段，渐变就沿着此线段的方向。 // 2.使用addColorStop(offset,color)设置线上关键点的颜色。 // offset表示渐变在虚拟线段的什么位置，取值0到1.0：开始位置，1：结束位置。 // 3.将渐变对象作为填充类型赋给fillStyle,canvas根据虚拟线段上关键点的颜色填充图形。   var gr = ctx.createLinearGradient(100,0,500,400); gr.addColorStop(0,"blue"); gr.addColorStop(1,"green"); ctx.arc(300,200,200,0,2*Math.PI,false); ctx.fillStyle = gr; ctx.fill(); ctx.stroke();

 

 

使用径向渐变填充图形： // 使用径向渐变填充图形 // 与线性渐变类似，只不过渐变在2个圆之间。 // 1.创建渐变对象。createRadialGradient(startX,startY,radius,startX2,startY2,radius2); // 参数为：第一个圆的中心点坐标和半径；第二个圆的中心点坐标和半径。 // 2.使用addColorStop()添加关键点颜色。 // 3.赋给fillStyle // 4.context填充图形。 var gr = ctx.createRadialGradient(100,200,100,500,400,200); gr.addColorStop(0,"green"); gr.addColorStop(1,"blue"); ctx.arc(200,200,200,0,2*Math.PI,false); ctx.fillStyle = gr; ctx.fill(); ctx.stroke();

 

图案填充： // 图案填充——Chrome OK，FF Doesn’t work // 1.创建图案填充对象:ctx.createPattern(image,repeat); // image:填充的图案对象，repeat:取值repeat-x,repeat-y,repeat，以及no-repeat，默认repeat。 var image = new Image(); image.onload = function() {     var cp = ctx.createPattern(image, "repeat");     ctx.fillStyle = cp;     ctx.rect(100,100,500,300);     ctx.fill(); } image.src = "http://www.baidu.com/img/baidu_jgylogo3.gif";

 

绘制图像： // 绘制图像——Chrome OK，FF Doesn’t work var image = new Image(); image.onload = function() {     // 使用drawImage(img,x,y,width,height)绘制图像     // 参数：img:图像对象，x,y相对于canvas的坐标,width,height:图像的宽和高。     ctx.drawImage(image,100,100); } image.src = 'http://www.baidu.com/img/baidu_jgylogo3.gif';

 

 

 

图像裁剪： // 图像裁剪 // 参数：img:图像对象 //       sourceX,sourceY；从图像的某一个点开始裁剪 //       sourceWidth,sourceHeight:裁剪的宽和高 //       destX,destY:裁剪的图像放到的目标点 //       destWidth,destHeight:放到目标区域的宽和高 // Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1:取得源图像的部分时候，超出了源图像的边界，导致错误。 var img = new Image(); var sourceX=0,sourceY = 0; var sourceWidth=200,sourceHeight = 200; var destX=100,destY = 100; var destWidth=150,destHeight = 150; img.onload = function() {     ctx.drawImage(img,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight); } img.src = 'D:\Desert.jpg';

 

 

文本的字体、大小、样式： // 文本的字体、大小、样式(normal,bold,italic。默认normal) // a.样式。b.字体大小.c.字体名 ctx.font = "bold 33pt Console"; // 文本颜色 ctx.fillStyle = "blue"; // 参数1：绘制的字符串。参数2，3:绘制的位置。 ctx.fillText("Hello World",100,100);

 

 

描绘字体边缘： // 描绘字体边缘，使用strokeText()替换fillText(); // 同时strokeStyle替换fillStyle // 如果同时填充字体并苗换字体边缘，需要先fillText()再strokeText() ctx.font = "italic 45pt Consolas"; ctx.fillStyle = "red"; ctx.fillText("Hello",100,100); ctx.strokeStyle = "blue"; ctx.strokeText("Hello world",100,100);

 

 

 

文本对齐： // 文本对齐使用textAlign属性，值：start,end,left,right,center     // 对齐的位置相对于一条虚拟的垂直线，由fillText()或strokeText()的x确定。     ctx.font = "bold 47pt Consolas";     ctx.strokeStyle = "blue";     ctx.textAlign = "center";     ctx.strokeText("你好，世界！",myCanvas.width/2,myCanvas.height/2);

 

 

 

使用ctx.measureText()获取文本尺寸信息(字体宽度） //使用ctx.measureText()获取文本尺寸信息(字体宽度）     // 字体高度=字体磅值     var x = 100;     var y = 100;     ctx.font = "bold 60pt Consolas";     var text = "Hello World";     ctx.strokeStyle = "blue";     ctx.strokeText(text,x,y);       ctx.font = "bold 20pt Consolas";     me = ctx.measureText(text);     var txtWd = me.width;     ctx.fillStyle = "green";     ctx.fillText("("+txtWd+"px wide)",x,y+30);

 

 

 

文本换行： 使用ctx.mesaureText(text)计算行宽。 // 获取画布         var myCanvas = document.getElementById("myCanvas");      // 得到2d绘图上下文      var ctx = myCanvas.getContext("2d");         // 文本换行     // 要绘制的文本     var text = "Hello,here is html canvas.Use it,you can do many things.Let's have a try!";     // 一行的最大宽度     var maxLineWidth = 200;     // 绘制的起始位置x     var x = 100;     // 绘制的起始位置y     var y = 100;     // 行高     var lineHeight = 12;       ctx.font = "bold 20pt Consolas";     ctx.fillStyle = "blue";     // 以空格分隔，得到每个单词。     var texts = text.split(" ");     var line = "";         for (var i=0; texts.length; i++)     {         var word = texts[i];         var tempLine = line + word + " ";         var mWidth = ctx.measureText(tempLine).width;           if (mWidth > maxLineWidth) // 说明tempLine行宽度已超过最大行宽度，且超出1个单词         {             ctx.fillText(line,x,y);             // 绘制1行后，下次绘制应该在此行的下面，因此高度需要增加行高。             y += lineHeight;             // 超出的1个单词，放到第二行显示，因为是以空格分隔的，因此需要加上空格。             line = word + " ";         }         else {             // 不满1行时，不断累积             line = tempLine;         }     }       // 绘制最后不满一行的。     ctx.fillText(line,x,y);

 

 

为图形添加阴影： // 为图形添加阴影 // 使用shadowColor,shadowBlur,shadowOffsetX,shadowOffsetY ctx.rect(100,100,300,200); ctx.shadowColor = "green"; ctx.shadowBlur = 30; ctx.shadowOffsetX = 10; ctx.shadowOffsetY = 10; ctx.fillStyle = "blue"; ctx.fill();

 

 

设置透明度： // 设置图形透明度 // 使用gloabalAlpha属性，值介于0到1，0：完全透明，1：完全不透明 ctx.beginPath(); ctx.rect(100,100,300,200); ctx.fillStyle = "blue"; ctx.fill();   ctx.gloabalAlpha = 0.3; ctx.beginPath(); ctx.arc(200,200,150,0,2*Math.PI,false); ctx.fillStyle = "red"; ctx.fill();

 

 

原点的位移： // 原点的位移 // 使用translate(,xy)函数将绘图原点移动到指定的位置，表现为整张图形的位移。 var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var rectWidth = 150; var rectHeight = 75; // 把坐标原点移动到canvas中心点 // 如果本行被注释掉，结果就是上面第一张图，否则就是第二张图的效果 context.translate(canvas.width / 2, canvas.height / 2); context.fillStyle = "blue"; context.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);

 

缩放： var rectWidth = 150; var rectHeight = 75; // 把坐标原点移动到canvas中心点 context.translate(myCanvas.width / 2, myCanvas.height / 2); // 横纵坐标都扩大2倍。 context.scale(2,2); context.fillStyle = "blue"; context.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth,rectHeight);