• 首页
• 域名注册
• 虚拟主机
• 网站建设
• 服务器租用
• 营销推广
• 网站程序
• 前端开发
• 移动互联网
• 企业邮箱

• 当前位置：创新互联 >> 常见问题 >> 前端开发 >> html >> HTML5画布(CANVAS)速查简表

HTML5画布(CANVAS)速查简表

• 作者：创新互联 文章来源：前端开发部 点击数： 更新时间：2014-07-18

• HTML5画布(CANVAS)元素

  <canvas id="myCanvas" width="500" height="300">
  复制代码

  浏览器不支持画布(canvas)时的备案
  <canvas id="myCanvas" width="500" height="300">  your browser doesn't support canvas!</canvas>
  复制代码

  2d context
  var context = canvas.getContext('2d');
  复制代码

  Webgl context (3d)
  var context = canvas.getContext('webgl');
  复制代码

  图形
  绘制方形
  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();
  复制代码

  风格
  填充
  context.fillStyle = 'red';context.fill();
  复制代码

  勾勒
  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();
  复制代码

  图案
  var imageObj = new Image();imageObj.onload = function() {  var pattern = context.createPattern(imageObj, 'repeat');  context.fillStyle = pattern;  context.fill();};imageObj.src = 'path/to/my/image.jpg';
  复制代码

  交点
  context.lineJoin = 'miter|round|bevel';
  复制代码

  线头
  context.lineCap = 'butt|round|square';
  复制代码

  阴影
  context.shadowColor = 'black';context.shadowBlur = 20;context.shadowOffsetX = 10;context.shadowOffsetY = 10;
  复制代码

  Alpha (透明)
  context.globalAlpha = 0.5; // between 0 and 1
  复制代码

  颜色格式
  字符串
  context.fillStyle = 'red';
  复制代码

  16进制
  context.fillStyle = '#ff0000';
  复制代码

  16进制简写
  context.fillStyle = '#f00';
  复制代码

  RGB
  context.fillStyle = 'rgb(255,0,0)';
  复制代码

  RGBA
  context.fillStyle = 'rgba(255,0,0,1)';
  复制代码

  路径
  开始路径
  context.beginPath();
  复制代码

  画线
  context.lineTo(x, y);
  复制代码

  弧形
  context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
  复制代码

  二次曲线
  context.quadraticCurveTo(cx, cy, x, y);
  复制代码

  二次曲线
  context.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);
  复制代码

  关闭路径
  context.closePath();
  复制代码

  图片
  画图
  var imageObj = new Image();imageObj.onload = function() {  context.drawImage(imageObj, x, y);};imageObj.src = 'path/to/my/image.jpg';
  复制代码

  指定尺寸画图
  var imageObj = new Image();imageObj.onload = function() {  context.drawImage(imageObj, x, y, width, height);};imageObj.src = 'path/to/my/image.jpg';
  复制代码

  裁剪图片
  var imageObj = new Image();imageObj.onload = function() {  context.drawImage(imageObj, sx, sy, sw, sh, dx, dy, dw, dh);};imageObj.src = 'path/to/my/image.jpg';
  复制代码

  文本
  写文字
  context.font = '40px Arial';context.fillStyle = 'red';context.fillText('Hello World!', x, y);
  复制代码

  写镂空文字
  context.font = '40pt Arial';context.strokeStyle = 'red';context.strokeText('Hello World!', x, y);
  复制代码

  粗体
  context.font = 'bold 40px Arial';
  复制代码

  斜体
  context.font = 'italic 40px Arial';
  复制代码

  对齐方式
  context.textAlign = 'start|end|left|center|right';
  复制代码

  文字基线
  context.textBaseline = 'top|hanging|middle|alphabetic|ideographic|bottom';
  复制代码

  获取文本宽度
  var width = context.measureText('Hello world').width;
  复制代码

  动画
  移动
  context.translate(x, y);
  复制代码

  扩大缩小
  context.scale(x, y);
  复制代码

  旋转
  context.rotate(radians);
  复制代码

  水平翻转
  context.scale(-1, 1);
  复制代码

  上下翻转
  context.scale(1, -1);
  复制代码

  自定义变换
  context.transform(a, b, c, d ,e, f);
  复制代码

  设置变换
  context.setTransform(a, b, c, d ,e, f);
  复制代码

  切割
  context.transform(1, sy, sx, 1, 0, 0);
  复制代码

  重置
  context.setTransform(1, 0, 0, 1, 0, 0);
  复制代码

  状态存储
  存储
  context.save();
  复制代码

  恢复
  context.restore();
  复制代码

  裁剪
  裁剪
  // draw path herecontext.clip();
  复制代码

  图像数据
  获取图像数据
  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);
  复制代码

  DATA URLS
  获取Data URL
  var dataURL = canvas.toDataURL();
  复制代码

  使用Data URL生成图像
  var imageObj = new Image();imageObj.onload = function() {  context.drawImage(imageObj, 0, 0);};
  imageObj.src = dataURL;
  复制代码

  合成
  合成操作
  context.globalCompositeOperation = 'source-atop|source-in|source-out|source-over|destination-atop|desti

• HTML5 WebGL 可实现逼真的云朵效果 :上一篇
  基于 HTML5 File API 的文件上传 :下一篇