《JAVASCRIPT高级程序设计》Canvas绘图-2D上下文
Canvas是HTML5添加的新元素，这个元素负责在页面中设定一个区域，然后通过JavaScript动态的在这个区域绘制图形。<canvas>由几组API组成，除了具备基本绘图能力的2D上下文，<canvas>还建议了一个名为WebGL的3D上下文，目前，支持该元素的浏览器都支持2D上下文，但对WebGL的支持还不够好。以下仅介绍2D上下文。
一、2D上下文
1、进行填充和描边
2D上下文的两种基本绘图操作是填充和描边；填充，是指的用指定的样式填充图形；描边，就是只在图像边缘划线。下例中绘制的矩形，是唯一一种可以直接在2D上下文绘制的图形。
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>填充和描边</title>
</head>
<body>
<!-- 出现在开始和结束标签中的是后备信息，如果浏览器不支持，就会显示： A drawing of something.-->
<canvas id="drawing" height="400" width="400">A drawing of something.</canvas>
<script>
var drawing = document.getElementById("drawing");
// 确认浏览器支持canvas元素
if(drawing.getContext){
var context = drawing.getContext("2d");
// 绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10,10,50,50);
// 绘制蓝色半透明矩形
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30,30,50,50);
// 在两个矩形重叠的地方清除一块小矩形
context.clearRect(40,40,10,10);
// 绘制红色描边的矩形
context.strokeStyle = "#ff0000";
context.strokeRect(50,50,50,50);
// 绘制半透明蓝色描边的矩形
context.strokeStyle = "rgba(0,0,255,0.5)";
context.strokeRect(70,70,50,50);
}
</script>
</body>
</html>
2、绘制路径和文本
2D上下文支持很多在画布上绘制路径的方法，通过路径可以创建出复杂的线条的形状。
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>绘制路径和文本</title>
</head>
<body>
<!-- 出现在开始和结束标签中的是后备信息，如果浏览器不支持，就会显示： A drawing of something.-->
<canvas id="drawing" height="400" width="400">A drawing of something.</canvas>
<script>
var drawing = document.getElementById("drawing");
// 确认浏览器支持canvas元素
if(drawing.getContext){
var context = drawing.getContext("2d");
// 开始路径
context.beginPath();
// 绘制外圆
context.arc(100,100,99,0,2*Math.PI ,false);
// 绘制内圆
context.moveTo(194,100); //移动绘图游标，不移动则内圆和外圆的线条相连
context.arc(100,100,94,0,2*Math.PI,false);
// 绘制分针
context.moveTo(100,100);
context.lineTo(100,15);
// 绘制时针
context.moveTo(100,100);
context.lineTo(35,100);
// 确定路径被关闭前，某一点是否在路径上
if(context.isPointInPath(100,100)){
// alert("Point (100,100) is not in the path");
}
// 描边路径
context.stroke();
//---------------------------------------------------------------------------------
// 绘制文本
context.font = "bold 14px Arial";
context.textAlign = "center"; //正常
context.textBaseline = "middle";
context.fillText("12",100,20);
context.textAlign = "start"; //x表示的是文本的起始位置
context.fillText("12",100,40);
context.textAlign = "end"; //x表示的是文本的结束位置
context.fillText("12",100,60);
//------------------------------------------------------------------------------
// 如果要在140px宽的区域中绘制文本，下面的像素从100px开始递减，最终找到合适的字体大小
var fontSize = 100;
context.font = fontSize+"px Arial";
while(context.measureText("Hello World").width > 140){
fontSize--;
context.font = fontSize+"px Arial";
}
context.fillText("Hello World", 210,210);
}
</script>
</body>
</html>
3、变换
2D上下文支持各种基本的绘制变换；创建绘制上下文时，会以默认值初始化变换矩阵；使用不同的变换矩阵应用处理，会产生不同的结果。
<!doctype html>
<html>
<!--
2D绘制上下文支持以下的绘制变换
rotate(angle):围绕原点旋转图像angle角度
scale(scaleX, scaleY):缩放图像，在x轴上乘以scaleX, 在Y轴上乘以scaleY
translate(x, y):将原点坐标移动到x,y
transform(m1_1, m1_2, m2_1, m2_2, dx, dy):乘以如下变换矩阵
m1_1 m1_2 dx
m2_1 m2_2 dy
0 0 1
setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy):先将变换矩阵重置为默认状态，再调用transform
-->
<head>
<meta charset = "utf-8">
<title>旋转时钟的指针</title>
</head>
<body>
<!-- 出现在开始和结束标签中的是后备信息，如果浏览器不支持，就会显示： A drawing of something.-->
<canvas id="drawing" height="400" width="400">A drawing of something.</canvas>
<script>
var drawing = document.getElementById("drawing");
// 确认浏览器支持canvas元素
if(drawing.getContext){
var context = drawing.getContext("2d");
context.beginPath();
context.arc(100,100,99,0,2*Math.PI ,false);
context.moveTo(194,100);
context.arc(100,100,94,0,2*Math.PI,false);
// 变换原点
context.translate(100,100);
// 旋转表针
context.rotate(1);
// 绘制分针
context.moveTo(0,0);
context.lineTo(0,-85);
// 绘制时针
context.moveTo(0,0);
context.lineTo(-65,0);
context.stroke();
}
</script>
</body>
</html>
4、绘制图像和模式
2D上下文内置了对图像的支持；模式实际上是重复的图像，可以用来填充或描边图形。
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>绘制图像/模式</title>
</head>
<body onload="drawPic()">
<img src="data:image1.png" alt="" id="myImg"/>
<canvas id="drawing" height="400" width="400" style="border:1px solid #d3d3d3;">A drawing of something.</canvas>
<script>
function drawPic(){
var drawing = document.getElementById("drawing");
var image = document.getElementById("myImg");
// 确认浏览器支持canvas元素
if(drawing.getContext){
// 绘制图片
var context = drawing.getContext("2d");
context.drawImage(image, 50,10,20,30);
// 使用模式重复绘制图片
// 创建模式，在一个矩形区域重复显示图像
var pattern = context.createPattern(image, "repeat");
context.fillStyle = pattern;
context.fillRect(100,100,100,100);
}
}
</script>
</body>
</html>
5、阴影和渐变
不同浏览器对阴影的支持有一些差异，有些甚至根本不支持阴影；可以通过createLinearGradient和createRadialGradient创建线性渐变和径向渐变。
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>阴影和渐变</title>
</head>
<body>
<canvas id="drawing" height="400" width="400" style="border:1px solid #d3d3d3;">A drawing of something.</canvas>
<script>
var drawing = document.getElementById("drawing");
var context = drawing.getContext("2d");
//设置阴影
context.shadowOffsetX = 5; //x轴方向的阴影偏移量
context.shadowOffsetY = 5; //y轴方向的阴影偏移量
context.shadowBlur = 4; //模糊的像素数
context.shadowColor = "rgba(0,0,0,0.5)"; //阴影的颜色
context.fillStyle = "#ff0000";
context.fillRect(10,10,50,50);
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30,30,50,50);
// 设置线性渐变
var gradient = context.createLinearGradient(100,100,150,150);
gradient.addColorStop(0,"white");
gradient.addColorStop(1,"black");
context.fillStyle = gradient;
context.fillRect(100,100,50,50);
// 设置径向渐变
gradient = context.createRadialGradient(175,175,10,175,175,30);
gradient.addColorStop(0,"white");
gradient.addColorStop(1,"black");
context.fillStyle = gradient;
context.fillRect(150,150,50,50);
</script>
</body>
</html>
6、使用图像数据
2D上下文可以通过getImageData()取得原始图像数据，并对其中的每一个像素进行处理；注意这个函数操作的图像和html文件需要在同一个域，否则会有跨域问题。下例是一个简单的灰阶过滤器。
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>灰阶过滤器</title>
</head>
<body onload = "filter()">
<img src="data:image1.png" alt="" id="myImg"/>
<canvas id="drawing" height="400" width="400" style="border:1px solid #d3d3d3;">A drawing of something.</canvas>
<script>
function filter(){
var drawing = document.getElementById("drawing");
if(drawing.getContext){
var context = drawing.getContext("2d"),
image = document.images[0];
// 绘制原始图像
context.drawImage(image, 0,0);
// 取得图像数据
var imageData = context.getImageData(0,0,image.width,image.height);
var data = imageData.data;
for(var i = 0, len = data.length;i<len;i+=4){
// 每个data数组中，都有四个元素红、绿、蓝和透明度的值
var red = data[i],
green = data[i+1],
blue = data[i+2],
alpah = data[i+3];
// 求rgb的平均值
var average = Math.floor((red+green+blue)/3);
// 设置颜色值、透明度不变
data[i] = average;
data[i+1] = average;
data[i+2] = average;
}
// 回写图像数据并显示结果
imageData.data = data;
context.putImageData(imageData,0,0);
}
}
</script>
</body>
</html>
7、合成
globalAlpha是一个介于0和1之间的值（包括0和1），用于指定所有绘制的透明度；globalCompositionOperation表示绘制后的图像怎么与先绘制的图形结合。
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>合成</title>
</head>
<body>
<canvas id="drawing" height="400" width="400" style="border:1px solid #d3d3d3;">A drawing of something.</canvas>
<script>
var drawing = document.getElementById("drawing");
if(drawing.getContext){
var context = drawing.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10,10,50,50);
// 设置合成操作
context.globalCompositeOperation = "destination-over";
// 后绘制的图像位于先绘制的图像下方
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30,30,50,50);
}
</script>
</body>
</html>
《JAVASCRIPT高级程序设计》Canvas绘图-2D上下文的更多相关文章
- 15. javacript高级程序设计-Canvas绘图
1. Canvas绘图 HTML5的<canvas>元素提供了一组JavaScript API,让我们可以动态的创建图形和图像.图形是在一个特定的上下文中创建的,而上下文对象目前有两种. ...
- JavaScript高级程序设计第三版.CHM【带实例】
从驱动全球商业.贸易及管理领域不计其数的复杂应用程序的角度来看,说 JavaScript 已经成为当今世界上最流行的编程语言一点儿都不为过. JavaScript 是一种非常松散的面向对象语言,也是 ...
- JavaScript高级程序设计（第4版）知识点总结
介绍 JavaScript高级程序设计 第四版,在第三版的基础上添加了ES6相关的内容.如let.const关键字,Fetch API.工作者线程.模块.Promise 等.适合具有一定编程经验的 W ...
- 《JavaScript高级程序设计（第3版）》阅读总结记录第一章之JavaScript简介
前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...
- 赠书《JavaScript高级程序设计（第三版）》5本
本站微博上正在送书<JavaScript高级程序设计>走过路过的不要错过,参与方式,关注本站及简寻网+转发微博:http://weibo.com/1748018491/DoCtp6B8r ...
- javascript高级程序设计学习笔记
javascript高级程序设计,当枕头书已经好久了~zz 现在觉得自己在js的开发上遇到了一些瓶颈,归根究底还是基础太薄弱,所以重新刷一遍js高程希望有更新的认识. 一.javascript简介 ...
- 《JavaScript高级程序设计（第3版）》笔记-序
很少看书,不喜欢看书,主要是上学时总坐不住,没有多大定性,一本书可以两天看完,随便翻翻,也可以丢在角落里几个月不去动一下. 上次碰到了<JavaScript高级程序设计(第3版)>感觉真的 ...
- 【javascript学习——《javascript高级程序设计》笔记】DOM操作
DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...
- 读javascript高级程序设计00-目录
javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...
随机推荐
- jquery全选框的实现
函数实现的话: head里加入函数实现 <script language="javascript" type="text/javascript"> ...
- php中使用mysql_fetch_array输出数组至页面中展示
用的是CI框架,很好的MVC结构 在Model层 public function showProteinCategory(){ $sql = "SELECT DISTINCT protein ...
- Django 缓存系统
Django 是动态网站,一般来说需要实时地生成访问的网页,展示给访问者,这样,内容可以随时变化,但是从数据库读多次把所需要的数据取出来,要比从内存或者硬盘等一次读出来 付出的成本大很多. 缓存系统工 ...
- phpmyadmin数据库导入大小限制的修改
1.遇到导入过大文件时,首先检查php.ini 配置文件中的以下三个地方,upload_max_filesize, memory_limit 和post_max_size,并且推荐修改的值要稍大于导入 ...
- HTML中meta的应用
meta是用来在HTML文档中模拟HTTP协议的响应头报文.meta 标签用 于网页的<head>与</head>中,meta 标签的用处很多.meta 的属性有两种:name ...
- Mapreduce 反向索引
反向索引主要用于全文搜索,就是形成一个word url这样的结构 file1: MapReduce is simple file2: MapReduce is powerful is simple f ...
- jade的特点
jade特点 1超强的可读性 2灵活易用的缩进 3块扩展 4代码默认进过编码处理,以增强安全性 5编译及运行时的上下文错误报告 6命令行编译支持 7html5模式(使用 !!!5文档类型) 8可选的内 ...
- Less-css预处理编译
node编译 第一步:https://nodejs.org/en/ 到node官网下载最新的node 第二步:和普通软件一样把node安装好 第三步:运行-cmd,准备安装less 全局安装(整个电 ...
- Linux之文件权限属性设置
文件权限属性设置 1.chown命令 chrep命令 chown命令改变某个文件或目录的所有者和所属的组,该命令可以向某个用户授权,使该用户变成指定文件的所有者或者改变文件所属的组. 用户可以是用户或 ...
- Java解析JSON文件的方法（一）
一.首先需要在Eclipse工程中导入相关的jar包,jar包参见链接:http://yunpan.alibaba-inc.com/share/link/NdA5b6IFK 二.提供一份待解析的jso ...