canvas教程

HTML5 Canvas 在线参考手册,语法速查表

字号+ 作者:H5之家 来源:H5之家 2018-01-19 08:02 我要评论( )

HTML5 Canvas Element Html5 canvas element canvas/canvas Canvas 错误提示 canvas您的浏览器不支持 Canvas!/canvas 2D 环境 var context = canvas.getContext('2d'); Webgl 环境 (3D) var context = canvas.getContext('webgl'); Paths 路径 开始路径 cont

  • HTML5 Canvas Element
  • Html5 canvas element <canvas></canvas>
  • Canvas 错误提示 <canvas> 您的浏览器不支持 Canvas! </canvas>
  • 2D 环境 var context = canvas.getContext('2d');
  • Webgl 环境 (3D) var context = canvas.getContext('webgl');
  • Paths 路径
  • 开始路径 context.beginPath();
  • Line 直线 context.lineTo(x, y);
  • Arc 圆/弧 context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
  • 二次曲线 context.quadraticCurveTo(cx, cy, x, y);
  • 三次曲线 context.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);
  • 结束路径 context.closePath();
  • 形状
  • 绘制矩形 context.rect(x, y, width, height); context.fill(); context.stroke();
  • 填充矩形 context.fillRect(x, y, width, height);
  • 绘制矩形 context.strokeRect(x, y, width, height);
  • 绘制圆 context.arc(x, y, radius, 0, Math.PI * 2); context.fill(); context.stroke();
  • Text 文本
  • Fill Text 填充文本 context.font = '40px Arial'; context.fillStyle = 'red'; context.fillText('Hello World!', x, y);
  • Stroke Text 比划文本 context.font = '40pt Arial'; context.strokeStyle = 'red'; context.strokeText('Hello World!', x, y);
  • Bold Text 粗体文本 context.font = 'bold 40px Arial';
  • Italic Text 斜体文本 context.font = 'italic 40px Arial';
  • Text Align 文本对齐 context.textAlign = 'start|end|left|center|right';
  • Text Baseline 文本基线 context.textBaseline = 'top|hanging|middle|alphabetic|ideographic|bottom';
  • 获取文本宽度 var width = context.measureText('Hello world').width;
  • Style 样式
  • Fill 填充 context.fillStyle = 'red'; context.fill();
  • Stroke context.strokeStyle = 'red'; context.stroke();
  • 线性渐变 var grd = context.createLinearGradient(x1, y1, x2, y2); grd.addColorStop(0, 'red'); grd.addColorStop(1, 'blue'); context.fillStyle = grd; context.fill();
  • 放射渐变 var grd = context.createRadialGradient(x1, y1, radius1, x2, y2, radius2); grd.addColorStop(0, 'red'); grd.addColorStop(1, 'blue'); context.fillStyle = grd; context.fill();
  • Line Join context.lineJoin = 'miter|round|bevel';
  • Line Cap 线帽 context.lineCap = 'butt|round|square';
  • Showdow 阴影 context.shadowColor = 'black'; context.shadowBlur = 20; context.shadowOffsetX = 10; context.shadowOffsetY = 10;
  • Alpha (Opacity) 透明度 context.globalAlpha = 0.5; // 0 到 1
  • Color 颜色
  • String 字符串 context.fillStyle = 'red';
  • Hex 十六进制(完整) context.fillStyle = '#ff0000';
  • Hex 十六进制(简写) context.fillStyle = '#f00';
  • RGB context.fillStyle = 'rgb(255,0,0)';
  • RGBA context.fillStyle = 'rgba(255,0,0,1)';
  • Transforms
  • Translate context.translate(x, y);
  • Scale context.scale(x, y);
  • Rotate context.rotate(radians);
  • 水平翻转 context.scale(-1, 1);
  • 垂直翻转 context.scale(1, -1);
  • 自定义 Transforms context.transform(a, b, c, d ,e, f);
  • 剪切操作
  • 剪切 context.clip();
  • Images 图像
  • 绘制图像默认大小 var imageObj = new Image(); imageObj.onload = function() { context.drawImage(imageObj, x, y); }; imageObj.src = 'images/image.jpg';
  • 绘制图像并设置大小 var imageObj = new Image(); imageObj.onload = function() { context.drawImage(imageObj, x, y, width, height); }; imageObj.src = 'images/image.jpg';
  • 剪切图像 var imageObj = new Image(); imageObj.onload = function() { context.drawImage(imageObj, sx, sy, sw, sh, dx, dy, dw, dh); }; imageObj.src = 'images/image.jpg';
  • Images Data 图像数据
  • 获取图像数据 var imageData = context.getImageData(x, y, width, height); var data = imageData.data;
  • 遍历图像像素 var imageData = context.getImageData(x, y, width, height); var data = imageData.data; var len = data.length; var i, red, green, blue, alpha; for(i = 0; i < len; i += 4) { red = data[i]; green = data[i + 1]; blue = data[i + 2]; alpha = data[i + 3]; }
  • 遍历图像像素坐标 var imageData = context.getImageData(x, y, width, height); var data = imageData.data; var x, y, red, green, blue, alpha; for(y = 0; y < imageHeight; y++) { for(x = 0; x < imageWidth; x++) { red = data[((imageWidth * y) + x) * 4]; green = data[((imageWidth * y) + x) * 4 + 1]; blue = data[((imageWidth * y) + x) * 4 + 2]; alpha = data[((imageWidth * y) + x) * 4 + 3]; } }
  • 设置图像数据 context.putImageData(imageData, x, y);
  • Image Data URL 图像数据 URL
  • 获取他图像数据 URL var dataURL = canvas.toDataURL();
  • 将图像数据 URL 绘制在 Canvas 上 var imageObj = new Image(); imageObj.onload = function() { context.drawImage(imageObj, 0, 0); }; imageObj.src = dataURL;
  • 保存/还原当前环境
  • 保存 context.save();
  • 还原 context.restore();
  • 绘图符合操作
  • 合成操作 context.globalCompositeOperation = 'source-atop|source-in|source-out|source-over|destination-atop|destination-in|destination-out|destination-over|lighter|xor|copy';

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    •  Html5学习-canvas影子效果的显示

      Html5学习-canvas影子效果的显示

      2018-01-19 09:00

    • Html5 Canvas开发之清除一个特定区域内的Canvas、宽高技巧、使Ca

      Html5 Canvas开发之清除一个特定区域内的Canvas、宽高技巧、使Ca

      2018-01-18 17:11

    • Tkinter教程之Canvas(1)篇

      Tkinter教程之Canvas(1)篇

      2018-01-18 16:05

    • 关于canvas的学习心得(一)

      关于canvas的学习心得(一)

      2018-01-18 13:16

    网友点评