综合开发

Canvas常用API

微信扫一扫,分享到朋友圈

Canvas常用API

Canvas API 提供了一个通过 JavaScriptHTML<canvas> 元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

Canvas API 主要聚焦于 2D 图形。而同样使用 <canvas> 元素的 WebGL API 则用于绘制硬件加速的 2D3D 图形。

参考文档: Canvas API

基础示例

在画布上绘制一个绿色的长方形。

<canvas id="canvas">
Not Support Canvas!
</canvas>
复制代码

如果浏览器不支持 canvas ,则显示— Not Support Canvas!

  1. document.getElementById('canvas') 获取HTML <canvas> 元素的引用。
  2. HTMLCanvasElement.getContext() 方法获取这个元素的 context —图像稍后将在此被渲染。通过 getContext 获取 context 对象(上下文对象), Canvas 的 API 就定义在这个 context 对象上面。
  3. CanvasRenderingContext2D 接口完成实际的绘制。 fillStyle 属性让长方形变成绿色。 fillReact() 方法将它的左上角放在 (10 , 10) ,把它的大小设置成宽150和高100. fillReact() 方法用来绘制矩形。
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.fillStyle = 'green'
ctx.fillRect(10, 10, 150, 100)
复制代码

上述代码中, getContext 方法指定参数 2d ,表示该 canvas 节点用于生成 2D 平面图案。参数是 webgl ,就表示用于生成 3D 图像(即立体图案),这部分叫做 WebGL API

1. 绘制路径

beginPath 方法表示开始绘制路径, moveTo(x, y) 方法设置线段的起点, lineTo(x, y) 方法设置线段的终点, stroke 方法用来给透明的线段着色。

ctx.beginPath() // 开始路径绘制
ctx.moveTo(20, 30) // 设置路径起点,坐标为(20,30)
ctx.lineTo(200, 10) // 设置路径终点坐标为(200,20)
ctx.lineWidth = 10.0 // 设置线宽
ctx.strokeStyle = '#CC0000'; // 设置线的颜色
ctx.stroke() // 对线进行着色,这时整条线就变得可见
复制代码

效果图如下:

其中
moveTo
lineTo

方法可以多次使用。

2. 图像处理方法

2.1 drawImage() 函数可以将图片绘制到画布上。做法是读取图片后,使用 drawImage 方法在画布内进行重绘。

由于图像的载入需要时间,因此 drawImage 方法需要在图像完全载入后再调用:

let img = new Image()
img.onload = function () {
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.width = image.width
ctx.height = image.height
ctx.drawImage(img, 0, 0) // (0 ,0 )代表图片在画布上的位置
}
img.src = 'image.png'
复制代码

上面代码将一个 PNG 图像载入画布。 drawImage() 方法接受三个参数,第一个参数是图像文件的 DOM 元素(即 <img> 节点),第二个和第三个参数是图像左上角在画布中的坐标,上例中的 (0, 0) 就表示将图像左上角放置在画布的左上角。

2.2 用 toDataURL()toBlob()canvas 数据转化为图片文件形式,并控制导出图片的质量

let img = new Image()
// toDataURL
img.src = ctx.toDataURL('image/png', 0.92)
// toBlob
img.src = ctx.toBlob('','image/png', 0.92)
复制代码

区别:

  1. toDataURL 是把图片转换成 base64 格式信息,纯字符的图片标识方法。第一个 image/png 参数表示导出的base64图片类型默认是png,即’image/png’,也可以为 ‘image/jpeg’或webp等格式。第二个参数 0.92 表示导出图片的质量,只有导出图片为jpg和webp时才有效果,默认是0.92。
  2. toBlob :是把 canvas 转换成 Blob 文件(二进制文件),通常用于文件上传。

2.3 用 getImageData 方法读取Canvas的内容,使用putImageData方法将数组内容重新绘制在Canvas上。

getImageData 方法可以用来读取Canvas的内容,返回一个对象,包含了每个像素的信息。

let imageData = context.getImageDate(0, 0, canvas.width, canvas.height)
复制代码

imageData 对象有一个 data 属性,它的值是一个一维数组。改数组的值,依次是每个像素的红、绿、蓝、alpha通道值,因此该数组的长度等于图像的像素宽度x图像的像素高度x4,每个值的范围是0-255。这个数组不仅可读,而且可写,因此通过操作这个数组的值,就可以达到操作图像的目的。修改这个数组以后,使用 putImageData 方法将数组内容重新绘制在Canvas上。

context.putImageData(imageData, 0, 0)
复制代码

NSLog 和 print 源码阅读和捕获方案

上一篇

菜鸟的前端经历小结

下一篇

你也可能喜欢

评论已经被关闭。

插入图片

热门栏目

Canvas常用API

长按储存图像,分享给朋友