这段时间做项目需要用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. python 函数式编程 高阶函数 装饰器

    # -*- coding:gb2312 -*- #coding=utf-8 # 高阶函数 import math def is_sqr(x): y = int(math.sqrt(x)) return ...

  2. 微信小程序-Page生命周期

    QQ讨论群:785071190 微信小程序开发之前我们还需认识一下小程序页面的生命周期,丛"微信小程序-代码构成"一文中我们可以了解到小程序页面中有一个.js的文件,这篇博文我们来 ...

  3. oracle包package的使用

    创建包 包头: CREATE OR REPLACE PACKAGE test_pkg IS PROCEDURE update_sal(e_name VARCHAR2,newsal NUMBER);  ...

  4. 慕课网--mysql开发技巧一 学习笔记

    现在存在下面的两张表,表的结构如下所示 师徒四人表结构:id,user_name,over数据:id user_name over1 唐僧 旃檀功德佛2 猪八戒 净坛使者3 孙悟空 斗战胜佛4 沙僧 ...

  5. 《T-GCN: A Temporal Graph Convolutional Network for Traffic Prediction》 论文解读

    论文链接:https://arxiv.org/abs/1811.05320 最近发现博客好像会被CSDN和一些奇怪的野鸡网站爬下来?看见有人跟爬虫机器人单方面讨论问题我也蛮无奈的.总之原作者Misso ...

  6. 01-最大子列和问题(java)

    问题描述:给定N个整数的序列{A1,A2,A3,…,An},求解子列和中最大的值. 这里我们给出{-2,11,-4,13,-5,-2}这样一个序列,正确的最大子列和为20 该题是在数据结构与算法中经常 ...

  7. Python3-collections模块-容器数据类型

    Python3中的collections模块实现了一些专业的容器数据类型 最常用的容器数据类型 字典.列表和元组.集合都已经被Python默认导入,但在实现一些特定的业务时,collections模块 ...

  8. 堆、栈、数据区、bss、代码段

    一个程序的运行是需要内存的,那么我们平常写的程序的内存都是怎么分配的呢 (1)首先我们要知道,内存是真实存在的,内存是一个物理器件.它时由操作系统管理的,我们平常只要使用它就行了,为了方便管理.操作系 ...

  9. 如何判断一个String字符串不为空或这不为空字符串

    如何判断一个String字符串不为空或这不为空字符串 转载兵哥LOVE坤 最后发布于2018-07-27 00:00:05 阅读数 5144  收藏 展开 1.校验不为空:   String str ...

  10. 【未完待续】MVC 之HTML辅助方法

    顾名思义,HTML辅助方法(HTML Helper)就是用来辅助产生HTML之用, 在开发View的时候一定会面对许多HTML标签,处理这些HTML的工作非常繁琐,为了降低View的复杂度,可以使用H ...