Canvas学习笔记2

画图片

var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");

//绘制图像
// ctx.drawImage(图片对象，x位置，y位置)
// ctx.drawImage(图片对象，x位置，y位置，宽度，高度)
// ctx.drawImage(图片对象，图像裁剪的位置x，图像的裁剪位置y，裁剪的宽度，裁剪的高度，x位置，y位置，宽度，高度)
var img = new Image()
img.src="img/cat.jfif"

var img2 = new Image()
img2.src="img/cat.jpg"

//图片载入之后再绘制内容
img.onload= function(){
	ctx.drawImage(img,50,50)
	ctx.fillText("水印文字",500,500)
}
img2.onload= function(){
	ctx.drawImage(img2,150,150,200,150)
}

画视频

<canvas id="canvas" width="800" height="600"></canvas>
<video width="800" height="" src="img/mov_bbb.mp4" controls="controls"></video>

<script>
	var video = document.querySelector("video")
	var canvas = document.querySelector("#canvas")

	var interId;
	var ctx = canvas.getContext('2d')
	video.onplay=function(){
		interId = setInterval(function(){
			//清除上一帧内容
			ctx.clearRect(0,0,800,600)
			//设置底色
			ctx.fillRect(0,0,800,600)
			ctx.drawImage(video,0,70,800,440)
			//给视频加水印
			ctx.font="20px 微软雅黑"
			ctx.strokeStyle = "#999"
			ctx.strokeText("水印文字",50,50)
		},16}
		// 间隔16是每秒钟60帧的刷新频率，，1000毫秒除60帧约等于16
	}
	video.onpause = function(){
		clearInterval(interId)
	}
</script>

获取画布上某一矩形块位置的像素色彩数据

//参数 x位置,y位置，宽度，高度
var imgData = ctx.getImageData(0,0,10,10)

返回的结果是一个ImageData对象的数组，数组里面每4个元素项代表一个rgba

putImageData把图像数据放回画布上

var imageData2 = ctx2.vreateImageData(28,28)
for(var i=0;i<imgData.data.length;i++){
	imgData2.data[i] = imgData.data[i]
}
ctx2.putImageData(imgData2,0,0,0,0,28,28)