w3c定义:

<canvas> 标签定义图形,比如图表和其他图像。

<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。

canvas 对象

属性: width height

方法: getContext(contextID)返回一个用于在画布上绘图的环境。

参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d",它指定了二维绘图,并且导致这个方法返回一个环境对象,该对象导出一个二维绘图API。该对象有自己的属性和方法

var ctx=canvas.getContext('2d');

特点:

canvas不能修改,想要移动,要借助定时器,清除整个画布,重新画。清除整个画布和一小块时间一样。会把所有图形都清了,都要重新画,因此直接清除整个画布使用起来更简单一些

ctx.clearRect(x,y,width,height);

x要清除的矩形左上角的 x 坐标

y要清除的矩形左上角的 y 坐标

width要清除的矩形的宽度,以像素计

height要清除的矩形的高度,以像素计

canvas画图步骤

  1. 获取canvas对象,相当于画布

    var canvas = document.getElementById("canvas");
  2. 由canvas对象创建图形上下文对象,相当于画笔

    var ctx=canvas.getContext('2d');
  3. 创建路径。
  4. 样式和变换。
  5. 画。stroke()描边 fill()填充

第3,4步顺序可以换

ctx.arc()圆或弧

ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);

x 圆的中心的 x 坐标。

y 圆的中心的 y 坐标。

r 圆的半径。

sAngle 起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。

eAngle 结束角,以弧度计。

counterclockwise 可选。规定应该逆时针还是顺时针绘图。false = 顺时针,true = 逆时针。

路径的概念

画布的一项强大功能是,它能够从基本的绘图操作来构建图形,然后,绘制这些图形的框架(勾勒它们)或者给这些图形的内容涂色(填充它们)。累计起来的操作统一叫做当前路径。一个画布只保持一条当前路径。

小栗子:绘制多边形

ctx.beginPath();//自动清除之前的,否则会相当于增加选区,画的时候会把所有路径都画上,并且线宽、颜色等听最后一次的

ctx.moveTo(100,100);//起点,将画笔移动到

ctx.lineTo(150,105);//下一个点

ctx.lineTo(350,105);

ctx.closePath(); //自动闭合路径(类似于PS套锁双击自动闭合)

globalCompositeOperation 值参考下面链接

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

常见误区:

  1. 有些画圆会写为ctx.arc(100,75,50,2*Math.PI,false);

    乍一眼看上去以为难道有参数可以省略?!其实并不是。

    在这里,默认会把该出现数字的位置上的布尔值转换成对应的数字,即

    true->1 false->0

    因此,ctx.arc(100,75,50,2Math.PI,false)==ctx.arc(100,75,50,2Math.PI,0)

  2. width 和 height

    属性:默认值是width:300px,height:150px;

    canvas.width,canvas.height获取到的是canvas的属性的值,并非css赋给它的样式的高度。

    样式:css写的宽高是将画布做拉伸或压缩后的大小

  3. 路径一般就是它的字面意思,是不包含描边或填充的效果的,所以即使你规定好路径也无法看到效果,需要手动调用其他方法去上色

  4. 绘制图像时,必须等待图片异步加载完成

    	var img = new Image();
    img.src = "xx.png"; //向服务器异步请求图片
    img.onload = function(){ //图片加载完成
    ctx.drawImage( img, x, y )
    }
  5. canvas中的旋转不是画布旋转!而是“绘图上下文(画笔)”旋转。

    ctx.rotate(deg),旋转角度,以弧度计。如需将角度转换为弧度,请使用 degreesMath.PI/180 公式进行计算。举例:如需旋转 5 度,可规定下面的公式:5Math.PI/180。

  6. canvas坐标系以画布左上角为原点(0,0),向右为横坐标,向下为纵坐标,单位是px.若想以某个固定的点为旋转的轴点,就必须平移画布的坐标原点:

    ctx.translate(x, y) //重新映射画布上的 (0,0) 位置。

  7. lineWidth描边宽度是从中间往两边扩大的

  8. ctx.save();保存的是canvas的状态(颜色、线宽、变换),不保存图像,restore时不会出现上一个图形,ctx.restore()恢复到上一次ctx.save()时的状态

    9.想要缩放要先缩放,再旋转,再平移,否则会将之前的平移也缩放,缩放以画布左上角为参考点

推荐好的canvas学习之处:http://canvas.migong.org

最新文章

  1. ABP框架 - 缓存
  2. Android笔记:异步消息处理
  3. codeforces733-C. Epidemic in Monstropolis 贪心加链表
  4. 创建 XMLHttpRequest 对象
  5. 深入浅出Redis01安装
  6. Sprint第二个冲刺(第六天)
  7. 什么是HTML、XML和XHTML
  8. wpf image控件循环显示图片 以达到动画效果 问题及解决方案
  9. dede调取文章内容的第一张图片
  10. DevExpress ASP.NET 使用经验谈(3)-XPO对象的使用(使用指定数据连接)
  11. android抓日志
  12. Node.js 8 中的 util.promisify的详解
  13. CMake--变量
  14. #WEB安全基础 : HTTP协议 | 0x4 各种协议与HTTP协议的关系(一个报文的旅行)
  15. JDK配置 linux
  16. 利用样式——android2.3实现android4.0风格的edittext
  17. Web 2.0应用客户端性能问题十大根源《转载》
  18. flume采集启动报错,权限不够
  19. C#递归累计到父行
  20. 日志汇总:logging、logger

热门文章

  1. python笔记9 : 多线程
  2. 什么是 GOF(四人帮,全拼 Gang of Four)?
  3. HTML表单页面的运用
  4. grep检索文本
  5. 【ASK】git使用中出现Permission denied (publickey).
  6. 存储过程根据ouID获取IntlPerson数据表
  7. 解决finalflares 安装成功后无法显示问题
  8. 获取系统DPI
  9. 搭建一个简单的基于web的网络流量监控可视化系统
  10. 【BZOJ3996】[TJOI2015]线性代数 最大权闭合图