发布于2022年10月15日2年前 1.HTML5专门为画布功能提供的标签:<canvas>,所以画布相关的功能都是基于这个标签来完成的; 1 <canvas id="canvas" width="550" height="300"></canvas> 2 // 直接在canvas中设置width和height属性和将width和height添加到CSS文件中,有一定的区别: 3 // 1.使用属性来定义canvas,不仅定义canvas对象的宽高,同时也定义了可绘制图形区的宽高; 4 // 2.而使用CSS的方法只能定义canvas本身的大小,不能定义图形绘制区; 2.为了能够调用HTML5的画布API,我们需要访问画布的相关上下文(Context); 1 var canvas = document.getElementById('canvas'), 2 context = canvas.getContext('2d'); 3 // 使用context可以调用更多的方法来绘制; 二 使用HTML5画布绘制直线 1.beginPath():开始绘制准备; 2.moveTo():绘制的起始坐标(x,y); 3.lineTo():绘制的结束坐标(x,y); 4.stroke():立刻开始绘制直线; 1 var canvas = document.getElementById('Canvas'), 2 context = canvas.getContext('2d'); 3 context.beginPath(); 4 context.moveTo(150, 100); 5 context.lineTo(300, 200); 6 context.stroke(); 三 设置直线的粗细 1 context.lineWidth = 20; // 设置直线的宽度为20px; 2 // 须在调用stroke()方法前设置这个属性;否则此属性无效; 四 设置绘制直线的颜色 1 context.strokeStyle = '#dd4814'; // 设置直线颜色; 2 // 须在调用stroke()方法前设置这个属性;否则此属性无效; 五 设置直线两端的样式 1.context.lineCap = 'butt'; // 绘制按钮类型; 2.context.lineCap = 'round'; // 绘制圆角类型; 3.context.lineCap = 'square'; // 绘制正方形类型; http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091917395043899.png 六 绘制弧形 // HTML5画布使用arc()方法来绘制相关的弧形; http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif 1 arc( 2 x, // 定义圆心x坐标; 3 y, // 定义圆心y坐标; 4 radius, // 半径; 5 startAngle, // 起始角度; 6 endAngle, // 结束角度; 7 counterClockWise, // 是否是逆时针方向; 8 ) http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif 1 var x = 200, y = 150, radius = 60, startAngle = 0.5*Math.PI, endAngle = 1.5*Math.PI, counterClockWise = false; 2 context.beginPath(); 3 context.arc(x, y, radius, startAngle, endAngle, counterClockWise); 4 context.strokeStyle = 'black'; 5 context.lineWidth = 15; 6 context.stroke(); http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091924107544761.png 七 生成二次曲线 // 二次曲线通过控制两根虚拟的直线来生成对应的图形; context.beginPath(); context.moveTo(100, 200); context.quadraticCurveTo(150, 50, 200, 200); context.lineWidth = 20; context.strokeStyle = '#dd4814'; context.stroke(); http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091926152545197.png 八 生成贝塞尔曲线 // 相对于二次曲线来说,贝塞尔曲线增加了一个控制点来生成更复杂的曲线样式; 1 context.beginPath(); 2 context.moveTo(188, 130); 3 context.bezierCurveTo(140, 10, 388, 10, 388, 170); 4 context.lineWidth = 20; 5 context.strokeStyle = '#dd4814'; 6 context.stroke(); http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091927077542236.png 九 HTML5路径 // 使用HTML5的路径(path),可以连接多个子路经; // 上一个路径的结束点即成为下一个路径的起始点; 1.lineTo(); 2.arcTo(); 3.quadraticCruveTo(); // 向下弯曲; 4.bezierCurveTo(); // 先向上弯曲,再向下弯曲; http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091928207233561.png http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif 1 context.beginPath(); 2 context.moveTo(100, 20); 3 context.lineTo(200, 160); 4 context.quadraticCurveTo(230, 200, 250, 120); 5 context.bezierCurveTo(290, -40, 300, 200, 400, 150); 6 context.lineTo(500, 90); 7 context.lineWidth = 15; 8 context.strokeStyle = '#dd4814'; 9 context.stroke(); http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091937405192449.png 十 设置直线的连接样式 // 在HTML5画布中直线的连接样式(linejoin)可以有不同类型; 1.miter:直角连接; 2.round:圆角连接; 3.bevel:去角连接; 1 context.beginPath(); 2 context.moveTo(99, 150); 3 context.lineTo(149, 50); 4 context.lineTo(199, 150); 5 context.lineJoin = 'miter'; 6 context.stroke(); http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091934455353089.png 十一 arcTo生成矩形圆角效果 // HTML5画布中我们可以使用arcTo方法来生成矩形圆角效果; http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif 1 var rectWidth = 200; 2 var rectHeight = 100; 3 var rectX = 189, rectY = 100; 4 var cornerRadius = 50; 5 context.beginPath(); 6 context.moveTo(rectX, rectY); 7 context.lineTo(rectX + rectWidth - cornerRadius, rectY); 8 context.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + cornerRadius, cornerRadius); 9 context.lineTo(rectX + rectWidth, rectY + cornerRadius + rectHeight); 10 context.lineWidth = 15; 11 context.stroke(); http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091940393488981.png 十二 画布生成闭合的图形 // 在HTML5画布中,我们使用beginPath方法开始路径设置,同时使用closePath方法来闭合路径; http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif 1 context.beginPath(); 2 context.moveTo(170, 80); 3 context.bezierCurveTo(130, 100, 130, 150, 230, 150); 4 context.bezierCurveTo(250, 180, 320, 180, 340, 150); 5 context.bezierCurveTo(420, 150, 420, 120, 390, 100); 6 context.bezierCurveTo(430, 40, 370, 30, 340, 50); 7 context.bezierCurveTo(320, 5, 250, 20, 250, 50); 8 context.bezierCurveTo(200, 5, 150, 20, 170, 80); 9 context.closePath(); 10 context.lineWidth = 15; 11 context.lineJoin = 'round'; 12 context.strokeStyle = '#dd4814'; 13 context.stroke(); http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091944414418675.png 十三 使用HTML5画布生成正方形或者矩形 // rect(x, y, w, h); // x,y代表矩形的左上角坐标;w是指矩形的宽度;h是指矩形的长度; context.beginPath(); context.rect(100, 50, 200, 200); // 绘制宽高; context.fillStyle = '#dd4814'; // 设置填充颜色; context.fill(); // 绘制结束; http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091946155822902.png 十四 绘制圆形 // 在HTML5画布中,如果需要生成一个原型,可以通过调用arc()方法来实现; // 只需要设置起始角度为0,终止角度是2*Math.PI; http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif 1 var centerX = canvas.width/2, 2 centerY = canvas.height/2, 3 radius = 80; 4 context.beginPath(); 5 context.arc(centerX, centerY, radius, 0, 2*Math.PI, false); 6 context.fillStyle = '#dd4814'; // 内填充颜色; 7 context.fill(); // 设置内填充; 8 9 context.lineWidth = 12; // 描边宽度; 10 context.strokeStyle = 'orange'; // 描边颜色; 11 context.stroke(); // 设置描边; 12 // 若同时使用了fill()和stroke(),务必保证fill()在stroke()之前调用,否则stroke()绘制的线会被fill()遮住一半; http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091947088947057.png 十五 HTML5画布生成线性渐变效果 1.createLinearGradient(x0, y0, x1, y1); // x0,y0代表了渐变开始点坐标;x1,y1代表了结束点坐标; 2.addColorStop(stop, color); // 设置渐变方向后,可以使用addColorStop来设置渐变的颜色; // stop介于0~1之间的值,表示渐变中开始与结束之间的位置;color代表颜色值; 1 context.rect(0, 0, canvas.width, canvas.height); 2 var gridi = context.createLinearGradient(0, 0, canvas.width, canvas.height); 3 gridi.addColorStop(0, 'orange'); 4 gridi.addColorStop(1, '#dd4814'); 5 context.fillStyle = gridi; 6 context.fill(); http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091948289265074.png 十六 HTML5画布绘制径向渐变; var gridi = context.createRadialGradient(275, 150, 50, 275, 150, 200); // 起始点X坐标, 起始点Y坐标, 起始点半径, 渐变结束点X坐标, 渐变结束点Y坐标, 结束点半径; 1 gridi.addColorStop(0, '#dd4814'); 2 gridi.addColorStop(1, '#ffff66'); 3 context.fillStyle = gridi; 4 context.fillRect(0, 0, 550, 300); http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091949525829263.png 十七 HTML5画布中添加背景图案 createPattern(image, repetition); // image:对应的图片对象; // repetition:图片的重复属性;默认值是repeat; http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif 1 var image = new Image(); 2 image.onload = function () { 3 // 这里确保图片加载后再执行HTML5画布相关的方法; 4 var pattern = context.createPattern(image, 'repeat'); 5 context.rect(0, 0, 550, 300); 6 context.fillStyle = pattern; 7 context.fill(); 8 } 9 // 设置背景图案的地址: 10 image.src = 'http://www.gbtags.com/gb/networks/uploadimg/d72f284c-c729-4de7-ba3e-b93587cb1446.jpg'; http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091951105515151.png 十八 HTML5画布绘图 // 使用drawImage()方法来绘制图形; http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif 1 var image = new Image(); 2 image.onload = function(){ 3 context.drawImage(image, 100, 50, 200, 125); 4 // 绘制图片image,第二和第三个参数表示图片距离canvas左上角的left和top距离; 5 // 第四和第五个参数表示绘制图片的宽度和高度; 6 } 7 image.src = 'http://www.gbtags.com/gb/networks/uploadimg/d72f284c-c729-4de7-ba3e-b93587cb1446.jpg'; http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091952541918013.png 十九 画布实现图片裁剪 drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) // sx:相对于图片自身裁剪的左边距离; // sy:相对于图片自身裁剪的顶端距离; // sw:裁剪的图片宽度; // sh:裁剪的图片高度; // dx:图片裁剪后相对于画布左端距离; // dy:图片裁剪后相对于画布顶端距离; // dw:图片裁剪后设置宽度; // dy:图片裁剪后设置高度; http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091953417698449.png 1 var image = new Image(); 2 image.onload = function(){ 3 context.drawImage(image, 100, 50, 100, 84, 50, 50, 100, 84); 4 }; 5 image.src = 'http://www.gbtags.com/gb/networks/uploadimg/d72f284c-c729-4de7-ba3e-b93587cb1446.jpg'; http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_091954262073624.png 二十 HTML画布添加文字 // 使用fillStyle属性来设置字体颜色; context.fillStyle = '#dd4814'; // 注意:在fillText()之前设置fillStyle的值; // 使用相关属性,可以定义文字属性, context.font = 'bold 30pt "microsoft yahei"'; // 使用fillText()方法添加相关文字; context.fillText(text, x, y); 1 context.font = 'bold 30pt "microsoft yahei"'; 2 context.fillStyle = '#dd4814'; 3 context.fillText('Hello World!', 150, 160); http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_101014054571429.png 二十一 HTML画布添加描边文字 // 使用strokeText()方法可以添加描边文字类型; // 并且可以使用strokeStyle()来设置描边颜色; http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif 1 context.font = 'bold 30pt "microsoft yahei"'; 2 context.fillStyle = '#ff6'; 3 context.fillText('Hello World!', 150, 160); 4 context.strokeStyle = '#dd4814'; 5 context.lineWidth = 2; 6 context.strokeText('Hello World!', 150, 160); 7 // 如果需要同时使用fillText()和strokeText()方法,务必先调用fillText()方法; http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_101017478161163.png 二十二 HTML画布文字对齐 // 在HTML5画布中,我们使用textAlign属性来定义文字的对齐; 1.center-居中; 2.left-居左; 3.right-居右; 4.start-文字方向从左到右; 5.end-文字方向从右到左; 1 context.font = 'bold 30pt "microsoft yahei"'; 2 context.textAlign = 'right'; 3 context.fillText('Hello World!', 275, 150); 4 // 基于坐标点(275, 150)的右对齐; http://www.mk2048.com/web_upload/blog_imgs/4/images0-cnblogs-com_blog2015_481810_201506_101034556766211.png 二十四 HTML5画布获取文字度量 // 在HTML5画布中,我们可以使用measureText方法来获取文字的相关度量信息对象; // 其中包含一个属性,即文字宽度;基于文字的大小和字体,它可以提供一个准确的文字宽度; http://www.mk2048.com/web_upload/blog_imgs/4/common-cnblogs-com_images_copycode.gif 1 var x = canvas.width/2, 2 y = canvas.height/2 - 10; 3 var text = 'Hello HTML5'; 4 5 context.font = 'bold 30pt "microsoft yahei"'; 6 context.textAlign = "center"; 7 context.fillStyle = 'red'; 8 context.fillText(text, x, y); 9 10 // 以下代码获取上面定义的text的相关metrics信息; 11 var metrics = context.measureText(text); 12 var width = metrics.width; 13 context.font = '15pt Arial'; 14 context.textAlign = 'center'; 15 context.fillStyle = '#888'; 16 context.fillText('- ' + width + 'px -', x, y+45);
创建帐户或登录后发表意见