HTML5画布(CANVAS)速查简表

  • HTML5画布(CANVAS)元素

    >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 here
    context.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|destination-in|destination-out|destination-over|lighter|xor|copy‘;
    

时间: 2024-10-24 02:48:11

HTML5画布(CANVAS)速查简表的相关文章

HTML5 画布canvas元素

HTML5 画布canvas元素 HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小看了这个画布,它能实现无限的可能性.接下来我们从最简单的部分开始,逐步认识Canvas的强大功能. 1.在页面中添加canvas元素: 默认情况下,Canvas所创建的矩形区域大小为宽300像素,高150像素,不过我们可以使用width和height属性来自定义画布

HTML5 画布 Canvas

利用html5的canvas元素使用 JavaScript 在网页上绘制图像. 通过规定尺寸.颜色和位置,来绘制一个圆: <!DOCTYPE htma> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #3CF;"> Your browser does not

关于HTML5画布canvas的功能

一.画布的使用 1.首先创建一个画布(canvas) <canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid #000000”></canvas> 2.使用JavaScript来绘制图像 <script> Var c=document.getElementByID(“myCanvas”)//得到画布 Var ctx=c.getContext(“2d”);//得到画笔 Cxt.fillS

HTML5 画布canvas

SVG的<defs> <symbols> 元素用于预定义一个元素使其能够在SVG图像中重复使用 <svg xmlns="http://www.w3.org/2000/svg" width="500" height="100">     <symbol id="shape2">         <circle cx="25" cy="25&quo

浅尝HTML5之canvas

转自:http://segmentfault.com/a/1190000000661407/ HTML5新标签 HTML5新引入header,footer,article,section,aside和nav,audio,datalist,details,video,progress,embed等标签 section 标签用于标识页面上的重要内容部分.该标签有点类似于将一本书分成几个章节. article 标签标识了 Web 页面中的主要内容. aside 标签表示arcitle元素内容之外的.与

html5画布

html5画布 Canvas: 什么是 Canvas? canvas 元素用于在网页上绘制图形. HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 创建 Canvas 元素 向 HTML5 页面添加 canvas 元素. 规定元素的 id.宽度和高度: <canvas id="myCanvas" width="200"

【OneAPM】极客编程挑战#023:使用HTML5画布生成渐变自由落体小球效果

本期挑战 给定如下HTML: <canvas id="gbcanvas" width="350" height="300"></canvas> 阅读如下的相关HTML5画布教程: HTML5画布实现的粒子运动效果 HTML5画布Canvas基础入门 请使用HTML5画布生成一个自由落体效果的渐变小球,效果如下(点击下图查看GIF动画) 渐变色由#dd4814开始, 由#FFFF66结束 提交方式: 录制代码编写过程或最终代

HTML5速查表

HTML5速查表 标签 描述 版本 属性 <!--...--> 定义注释 4 / 5 none <!DOCTYPE> 定义文档类型 4 / 5 none <a> 定义超链接,用于从一个页面链接到另一个页面. 4 / 5 href | hreflang | media | ping | rel | target | type <abbr> 定义缩写 4 / 5 全局属性 <acronym> 定义首字母缩写 4 - <address> 定

每个程序员都应该收藏的算法复杂度速查表

算法复杂度这件事 这篇文章覆盖了计算机科学里面常见算法的时间和空间的大 O(Big-O)复杂度.我之前在参加面试前,经常需要花费很多时间从互联网上查找各种搜索和排序算法的优劣,以便我在面试时不会被问住.最近这几年,我面试了几家硅谷的初创企业和一些更大一些的公司,如 Yahoo.eBay.LinkedIn 和 Google,每次我都需要准备这个,我就在问自己,“为什么没有人创建一个漂亮的大 O 速查表呢?”所以,为了节省大家的时间,我就创建了这个,希望你喜欢! — Eric 图例 绝佳 不错 一般