HTML5第3天
一、html5
1.1 绘制图片
drawImage 该方法用于绘制图片，使用方式有三种：
? 第一种使用方式：可以以原尺寸来绘制图片
? ctx.drawImage(img, x, y)
? img: 要绘制的图片
? x: 以原尺寸将图片放在canvas中的x点
? y: 以原尺寸将图片放在canvas中的y点
? 第二种使用方式： 可以缩放图片
? ctx.drawImage(img, x, y, w, h)
? img: 要绘制的图片
? x: 将缩放后的图片放在canvas中的x点
? y：将缩放后的图片放在canvas中的y点
? w: 缩放后的图片的宽 h: 缩放后的图片的高
? 第三种方式: 截取图片中的某一部分
? ctx.drawImage(img, img_x, img_y, img_w, img_h, canvas_x, canvas_y, canvas_w, canvas_h)
? img: 要绘制的图片
? img_x: 要截取的图片的x点 i
? mg_y: 要截取的图片的y点
? img_w: 要截取的图片的宽
? img_h: 要截取的图片的高
? canvas_x: 将截取后的图片放在canvas中的x点
? canvas_y: 将截取后的图片放在canvas中的y点
? canvas_w: 将截取后的图片放在canvas中的宽
? canvas_h: 将截取后的图片放在canvas中的高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
border: 1px solid #000;
/* display: block; */
/* margin: 0 auto; */
/* 定义背景图 */
/* background-image: url(./images/sf.jpg); */
}
</style>
</head>
<body>
<!-- <img src="./images/sf.jpg" alt=""> -->
<!-- H5中提供了canvas标签用于定义画布 -->
<canvas width="1600" height="844" id="myCanvas"></canvas>
<script>
// 获取画布
var canvas = document.getElementById('myCanvas');
// 获取对应的画笔
var ctx = canvas.getContext('2d');
// 创建图片元素
// var img = document.createElement('img');
// 可以通过new Image
var img = new Image();
// 设置图片路径
img.src = './images/sf.jpg';
// 为了保证图片加载完毕之后 要设置load时间
img.onload = function() {
// 获取图片的宽高
// console.log(this.width);
// console.log(this.height);
// 绘制图片有三种方式:
// 1 以原尺寸的形式将图片放入到canvas中
// ctx.drawImage(this, 0, 0);
// 2 缩放图片
// ctx.drawImage(this, 0, 0, 800, 422);
// ctx.drawImage(this, 0, 0, canvas.width / 2, canvas.height / 2);
// 3 截取图片中的某块区域
// ctx.drawImage(img, 240, 75, 450, 750, 0, 0, 450, 750);
// 截取之后再实现缩放
ctx.drawImage(img, 240, 75, 450, 750, 0, 0, 275, 375);
}
</script>
</body>
</html>
1.2 坐标系变换
canvas中允许我们对坐标系做变换，类似css中的transorm
? translate(x, y) 移动坐标系
? x 表示水平移动
? y 表示垂直方向移动
? rotate(deg) 渲染坐标系
? deg 表示旋转角度 单位是弧度（PI）
? scale(x, y) 缩放坐标系
? x 表示水平方向缩放
? y 表示垂直方向缩放
大于1表示放大，小于1表示缩小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
display: block;
margin: 0 auto;
border: 1px solid #000;
}
</style>
</head>
<body>
<!-- 定义画布 -->
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
// 获取画布
var canvas = document.getElementById('myCanvas');
// 获取画笔
var ctx = canvas.getContext('2d');
// 封装绘制坐标系方法
function drawXy() {
// 封装绘制线段的方法
function line(x, y, endX, endY) {
// 开启路径
ctx.beginPath();
// 移动画笔到某个位置
ctx.moveTo(x, y);
// 落笔
ctx.lineTo(endX, endY);
// 描边
ctx.stroke();
}
// 绘制x轴
line(5, 5, 785, 5);
line(780, 0, 785, 5);
line(780, 10, 785, 5);
// 绘制y轴
line(5, 5, 5, 585);
line(0, 580, 5, 585);
line(10, 580, 5, 585);
}
// 绘制坐标系
drawXy();
// 平移坐标系
ctx.translate(canvas.width / 2, canvas.height / 2);
// 平移坐标系之后 不会影响之前已经绘制好的图形
// 定义弧度
// var deg = Math.PI / 180;
// rotate(deg) 旋转坐标系
// ctx.rotate(30 * deg);
// scale(x, y) 缩放坐标系
ctx.scale(0.5, 0.5);
// 改变坐标系之后绘制新图形
drawXy();
</script>
</body>
</html>
1.3 状态的存储与恢复
在canvas中很多时候要用到之前的状态，所以提供了相应的API用于保存cnavas上的状态
? save 存储状态
? restore 恢复状态
save方法可以使用多次，每save一次就好比装了一颗子弹
每restore一次，就好比扣了一次扳机
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
display: block;
margin: 0 auto;
border: 1px solid #000;
}
</style>
</head>
<body>
<!-- H5中提供了标签 canvas 用于提供画布 -->
<canvas width="800" height="500" id="myCanvas"></canvas>
<script>
// 获取canvas
var canvas = document.getElementById('myCanvas');
// 通过js方式来获取画笔
var ctx = canvas.getContext('2d');
// 改变填充色
ctx.fillStyle = 'orange';
// 填充图形
ctx.fillRect(0, 0, 100, 100);
// 保存状态
ctx.save();
// 改变填充色
ctx.fillStyle = 'skyblue';
// 填充图形
ctx.fillRect(100, 100, 100, 100);
// 保存状态
ctx.save();
// 恢复一次状态
ctx.restore();
ctx.restore();
// 填充图形
ctx.fillRect(200, 200, 100, 100);
</script>
</body>
</html>
1.4 像素信息
getImageData 该方法用于获取canvas上的像素信息
返回的是一个像素信息对象，该对象中有三个属性
第一个 是一个data是一个数组
第二个 是height 表示获取图像的高度
第三个 是width表示获取图像的宽度
putImageData 该方法用于将修正之后的像素信息对象重新放回canvas，三个参数分别是：
第一个参数：像素数据
第二个参数：绘制横坐标
第三个参数：绘制纵坐标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
display: block;
margin: 0 auto;
border: 1px solid #000;
}
body {
text-align: center;
}
</style>
</head>
<body>
<!-- H5中提供了标签 canvas 用于提供画布 -->
<canvas width="800" height="422" id="myCanvas"></canvas>
<button id="getPX">获取像素</button>
<button id="red">去掉红色</button>
<button id="green">去掉绿色</button>
<button id="blue">去掉蓝色</button>
<button id="gray">灰度</button>
<script>
// 获取canvas
var canvas = document.getElementById('myCanvas');
// 通过js方式来获取画笔
var ctx = canvas.getContext('2d');
// 获取按钮
var getPX = document.getElementById('getPX');
var red = document.getElementById('red');
var green = document.getElementById('green');
var blue = document.getElementById('blue');
var gray = document.getElementById('gray');
// 创建图片元素
var img = new Image();
// 设置图片路径
img.src = './images/sf.jpg';
// 设置load事件
img.onload = function() {
// 缩放图片
ctx.drawImage(this, 0, 0, 800, 422);
}
// 获取像素
getPX.onclick = function() {
// getImageData(x, y, w, h) 该方法用于获取canvas上的像素信息
var imgData = ctx.getImageData(0, 0, 800, 422);
// 得到的imgData中有一个data属性 值是一个数组 里面存储的是当前canvas中的所有像素信息 (r, g, b, a)四个像素点信息
}
// 去掉红色
red.onclick = function() {
// 获取像素信息
var imgData = ctx.getImageData(0, 0, 800, 422);
// 遍历像素信息数组
for (var i = 0; i < imgData.data.length; i += 4) {
// 找到红色通道值 并去除
imgData.data[i] = 0;
}
// 将操作完毕之后的像素对象重新放回canvas中
ctx.putImageData(imgData, 0, 0);
}
// 去掉绿色
green.onclick = function() {
// 获取像素信息
var imgData = ctx.getImageData(0, 0, 800, 422);
// 遍历像素信息数组
for (var i = 1; i < imgData.data.length; i += 4) {
// 找到红色通道值 并去除
imgData.data[i] = 0;
}
// 将操作完毕之后的像素对象重新放回canvas中
ctx.putImageData(imgData, 0, 0);
}
// 去掉蓝色
blue.onclick = function() {
// 获取像素信息
var imgData = ctx.getImageData(0, 0, 800, 422);
// 遍历像素信息数组
for (var i = 2; i < imgData.data.length; i += 4) {
// 找到红色通道值 并去除
imgData.data[i] = 0;
}
// 将操作完毕之后的像素对象重新放回canvas中
ctx.putImageData(imgData, 0, 0);
}
// 灰度
gray.onclick = function() {
// 获取像素信息
var imgData = ctx.getImageData(0, 0, 800, 422);
// 遍历像素信息数组
for (var i = 0; i < imgData.data.length; i += 4) {
// 获取每一个通道值
var r = imgData.data[i];
var g = imgData.data[i + 1];
var b = imgData.data[i + 2];
// 取平均值
var avg = (r + g + b) / 3;
// 设置回去
imgData.data[i] = avg;
imgData.data[i + 1] = avg;
imgData.data[i + 2] = avg;
}
// 将操作完毕之后的像素对象重新放回canvas中
ctx.putImageData(imgData, 0, 0);
}
</script>
</body>
</html>
1.5 融合
所谓的融合，就是在canvas中新图形和原有图形之间的覆盖方式。
默认情况下，新图形覆盖原有图片
通过ctx.globalCompositeOperation属性设置
source-over 默认。在目标图像上显示源图像。
source-top 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
? destination-over 在源图像上方显示目标图像。
? destination-atop 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
? destination-in 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
? destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
? lighter 显示源图像 + 目标图像。
? copy 显示源图像。忽略目标图像。
? xor 使用异或操作对源图像与目标图像进行组合。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
display: block;
margin: 0 auto;
border: 1px solid #000;
}
</style>
</head>
<body>
<!-- 定义画布 -->
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
// 获取画布
var canvas = document.getElementById('myCanvas');
// 获取画笔
var ctx = canvas.getContext('2d');
// 封装绘制矩形的方法
function drawRect(color, x, y, w, h) {
// 改变填充色
ctx.fillStyle = color;
// 绘制矩形
ctx.fillRect(x, y, w, h);
}
// 绘制矩形
drawRect('skyblue', 0, 0, 150, 150);
// 改变融合方式
ctx.globalCompositeOperation = 'source-in';
// drawRect('orange', 75, 75, 150, 150);
// 如果两个图形之间没有交互处 此时是无法绘制出图形的
drawRect('orange', 300, 300, 150, 150);
</script>
</body>
</html>