这段时间做项目需要用canvas。

而我在看文档的时候,发现canvas是一个很独立的API:和DOM BOM基本上没什么关系。

在学习canvas的时候需要了解很多概念,否则看某些文档的讲解可能会看不懂,比如MDN。

那么,第一步。

<canvas id="canvas"></canvas>
var element = document.getElementById("canvas")

HTMLCanvasElement

刚才声明的变量 element 就是 HTMLCanvasElement,即canvas网页元素。

HTMLCanvasElement 有width 和height ,而且有默认值。

这个问题在图像操作时尤为重要——要想让你的canvas图片不扭曲,就必须主动设置weidh和height。用CSS是不行的,HTMLCanvasElement可以用CSS设定为你想要的大小,但图片会扭曲。

可以直接赋值(用js或者直接写HTML里都可以)设置,也可以通过js(jquery)的方法设置。

// 直接赋值
element.width = 500
// js赋值
element.getAttribute("width", 500)
// jquery赋值
$(element).attr("width", 500)

CanvasRenderingContext2D

CanvasRenderingContext2D,几乎是一切canvas操作的起点。

在HTMLCanvasElement上调用方法可以得到。

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

这里的 ctx 就是 CanvasRenderingContext2D 对象。

顺便一提,getContext()方法有两种参数,一个是"2d",另一个是"experimental-webgl"(webgl用,这里不涉及)。

有了CanvasRenderingContext2D,我们就可以做各种各样的事情了。

像素控制为例。

说到像素控制,就又要引入一个新概念了。

ImageData

CanvasRenderingContext2D调用getImageData()方法可以获得ImageData对象。

var ImageData = ctx.getImageData(sx, sy, sw, sh);

这4个参数都是必须要传的。

sx 将要被提取的图像数据矩形区域的左上角 x 坐标。

sy 将要被提取的图像数据矩形区域的左上角 y 坐标。

sw 将要被提取的图像数据矩形区域的宽度。

sh 将要被提取的图像数据矩形区域的高度。

ImageData对象有3个属性,其中比较重要的是data属性。

注意:这三个属性都是只读的。

就是说,你可以改ImageData,也可以改ImageData.data里面的值,但是你不能直接改ImageData.data。

ImageData.data

ImageData.data属性返回一个Uint8ClampedArray数组。

Uint8ClampedArray是一种特殊的数组。

Uint8ClampedArray(8位无符号整型固定数组) 类型化数组表示一个由值固定在0-255区间的8位无符号整型组成的数组;如果你指定一个在 [0,255] 区间外的值,它将被替换为0或255;如果你指定一个非整数,那么它将被设置为最接近它的整数。(数组)内容被初始化为0。一旦(数组)被创建,你可以使用对象的方法引用数组里的元素,或使用标准的数组索引语法(即使用方括号标记)。

那么,颜色数据是怎么被记到这个数组里面的?

其实很简单。

首先,这是一个一维数组,里面全是0-255的数字。

其次,一个像素点需要4个数字来表示:R通道、G通道、B通道,alpha通道。

var data = ImageData.data
data[0]:red
data[1]:green
data[2]:blue
data[3]:alpha opacity
data[4]:red
...
data[data.length - 1]:alpha opacity

data[0]:第一个像素点的R通道值。

data[1]:第一个像素点的G通道值。

data[2]:第一个像素点的B通道值。

data[3]:第一个像素点的alpha通道值。

data[4]:第2个像素点的R通道值。

...

即ImageData.data.length %4 === 0(ImageData.data.length一定可以被4整除)。

比如有个100*100的canvas区域,有10000个点,那么ImageData.data里面就有40000个值。

循环里面的数值进行修改就可以做各种各样的颜色操作了。(比如反色就是RGB通道:255-x)

以上。以后可能会更新。

 

canvas : 几个入门需要的基本概念的更多相关文章

  1. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  2. JAVAEE——BOS物流项目13:Quartz入门案例、核心概念、cron 表达式的格式(了解)

    1.quartz入门案例 本入门案例基于spring和quartz整合完成. 第一步:创建maven工程,导入spring和quartz相关依赖 第二步:创建任务类 第三步:在spring配置文件中配 ...

  3. Spring入门及IoC的概念

    Spring入门 Spring是一个轻量级的Java开发框架,最早由Robd Johnson创建,目的为了解决企业级应用开发的业务逻辑层和其他各层的耦合问题,它是一个分层的JavaSE/EE轻量级开源 ...

  4. 快速入门系列--CLR--01基本概念

    在.NET平台用C#这么久,自然会发现其版本很多,相应的概念也会很多,常常都是萌萌哒.而在实际工作中经常会遇到需要配置dll版本号,公钥token等场景,因而对C#.NET.CLR.框架类型等基础概念 ...

  5. 快速入门系列--WCF--01基础概念

    转眼微软的WCF已走过十个年头,它是微软通信框架的集大成者,将之前微软所有的通信框架进行了整合,提供了统一的应用方式.记得从自己最开始做MFC时,就使用过Named Pipe命名管道,之后做Winfo ...

  6. 快速入门系列--TSQL-01基础概念

    作为一名程序员,对于SQL的使用算是基础中的基础,虽然也写了很多年的SQL,但常常还是记不清一些常见的命令,故而通过一篇博文巩固相关的记忆,并把T-SQL本身的一些新特性再进行一次学习. 首先回顾基础 ...

  7. MongoDB入门二:基本概念

    前言 工欲善其事必先利其器.在学习MongoDB之前,需要对MongoDB的一些基本概念有系统的了解. 所以,本篇文章主要介绍MongoDB的一些基本概念,这些概念的定义均来自<MongoDB权 ...

  8. 《Java从入门到放弃》JavaSE入门篇:面向对象概念(入门版)

    要知道什么是面向对象,你首先要有个对象吧,所以······没有对象的可以回家洗洗睡了· 好吧,前面是开玩笑,要说明什么是面向对象,我们还是先 例子: 小呆:"小傻,你今天早餐吃的什么?&qu ...

  9. JMeter入门(01)概念和样例

    一.概念 JMeter 是一款专门用于功能测试和压力测试的轻量级测试开发平台,实现了许多和互联网相关的网络测试组件,同时还保留着很强的扩展性. JMeter可以用来测试诸如:静态文件,Java Ser ...

随机推荐

  1. 【DMCP】2020-CVPR-DMCP Differentiable Markov Channel Pruning for Neural Networks-论文阅读

    DMCP 2020-CVPR-DMCP Differentiable Markov Channel Pruning for Neural Networks Shaopeng Guo(sensetime ...

  2. robot framework使用小结(四)

    robot framework可以采用读excel表这种形式实现数据分离,本文没有实现批量读取excel表内容(还不会),后续有必要就学习哈再更新~~~ 新建测试案例baidu05, 右键项目名rob ...

  3. 并发06--JAVA中的并发工具类

    1.等待多线程完成的CountDownLatch CountDownLatch允许一个或多个线程等待其他线程完成操作. 使用join也可以完成这个操作,代码示例如下: package com.exam ...

  4. 源码剖析@contextlib.contextmanager

    示例 @contextlib.contextmanager def result(a): print('before') yield print('after') 外层装饰源码 包装func函数,真实 ...

  5. JavaScript基础对象创建模式之链式调用模式(Chaining Pattern)(029)

    链式调用模式允许一个接一个地调用对象的方法.这种模式不考虑保存函数的返回值,所以整个调用可以在同一行内完成: myobj.method1("hello").method2().me ...

  6. django项目常见报错集

    1.mysqlclient 目前不支持高版本python3 django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 or new ...

  7. jQurey zTree API 3.5

    https://jeesite.gitee.io/front/jquery-ztree/3.5/api/API_cn.html

  8. 一行一行源码分析清楚AbstractQueuedSynchronizer

    ​“365篇原创计划”第二十四篇. 今天呢!灯塔君跟大家讲: 一行一行源码分析清楚AbstractQueuedSynchronizer 在分析 Java 并发包 java.util.concurren ...

  9. 利用FlubuCore用C#来写持续集成和持续部署脚本

    前言 随着近些年微服务的流行,有越来越多的开发者和团队所采纳和使用,它的确提供了很多的优势也解决了很多的问题,但是我们也知道也并不是银弹,提供优势的同时它也给我们的开发人员和团队也带来了很多的挑战. ...

  10. .net面试技术要点总结

    [整理]待毕业.Net码农就业求职储备   本文题目来源于互联网,仅供即将从学校毕业的.Net码农(当然,我本人也是菜逼一个)学习之用.当然,学习了这些题目不一定会拿到offer,但是针对就业求职做些 ...