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)