【通用行业开发部】canvas学习

简介: canvas在前端开发过程中是我们会经常遇到,如html2canvas、echarts等等,都使用到了canvas能力。本文参考MDN,简单的对canvas做了一个介绍和功能梳理。

一、canvas简介

1、canvas元素是html5的新增元素

2、canvas元素本身没有绘图能力,需要通过javascript和canvas元素标签来绘制图形

3、可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面

4、Canvas API主要聚焦于2D图形。而同样使用元素的 WebGL API 则用于绘制硬件加速的2D和3D图形

二、canvas元素知识

<canvas id="myCanvas" width="150" height="150">当前浏
览器暂不支持canvas, 请更换浏览器后再试</canvas>

1、canvas会初始化宽度为300px和高度为150px。该元素可以使用CSS来定义大小,但在绘制时图像会伸缩以适应它的框架尺寸:如果CSS的尺寸与初始画布的比例不一致,它会出现扭曲。(注意: 如果你绘制出来的图像是扭曲的, 尝试用width和height属性为canvas明确规定宽高,而不是使用CSS)

2、某些较老的浏览器(尤其是IE9之前的IE浏览器)或者文本浏览器不支持canvas,在这些浏览器会忽略容器并展示替代内容

3、canvas元素有一个叫做 getContext() 的方法,这个方法是用来获得渲染上下文和它的绘画功能,通过getContext()可以检查浏览器是否支持canvas

var canvas = document.getElementById('myCanvas');
if (canvas.getContext){
  //支持canvas
} else {
  // 不支持canvas
}

三、绘制

1、绘制形状

1.1移动笔触

moveTo():从一个点到另一个点的移动过程,我们通常会使用moveTo()函数设置起点,也能够用来绘制一些不连续的路径

1.2绘制直线

lineTo(x, y):绘制一条从当前位置到指定x以及y位置的直线

1.3绘制矩形

canvas提供了三种方法绘制矩形:

fillRect(x, y, width, height):绘制一个填充的矩形;

strokeRect(x, y, width, height):绘制一个矩形的边框;

clearRect(x, y, width, height):清除指定矩形区域,让清除部分完全透明

function draw() {
  var canvas = document.getElementById('myCanvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}

1.4绘制路径

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径,甚至一个子路径,都是闭合的。以下是绘制路径所要用到的函数:

beginPath()新建一条路径,生成之后,图形绘制命令被指向到路径上生成路径;closePath()闭合路径之后图形绘制命令又重新指向到上下文中;

stroke()通过线条来绘制图形轮廓;

fill()通过填充路径的内容区域生成实心的图形

function draw() {
  var canvas = document.getElementById('myCanvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}

1.5绘制曲线

arc(x, y, radius, startAngle, endAngle, anticlockwise):画一个以(x,y)为圆心的以radius为半径的圆弧(圆),从startAngle开始到endAngle结束,按照anticlockwise给定的方向(默认为顺时针)来生成;

arcTo(x1, y1, x2, y2, radius)根据给定的控制点和半径画一段圆弧,再以直线连接两个控制点;

quadraticCurveTo(cp1x, cp1y, x, y)绘制二次贝塞尔曲线,cp1x,cp1y为一个控制点,x,y为结束点;

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)绘制三次贝塞尔曲线,cp1x,cp1y为控制点一,cp2x,cp2y为控制点二,x,y为结束点。

2、绘制文本

2.1、渲染文本

canvas 提供了两种方法来渲染文本:

fillText(text, x, y [, maxWidth]):在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的

strokeText(text, x, y [, maxWidth]):在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的

2.2、文本样式

font = value:当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。

textAlign = value:文本对齐选项. 可选的值包括:start, end, left, right or center. 默认值是 start。

textBaseline = value:基线对齐选项. 可选的值包括:top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。

direction = value:文本方向。可能的值包括:ltr, rtl, inherit。默认值是 inherit。

2.3、阴影效果

shadowColor:任何CSS中的颜色值,可以使用透明度

ShadowOffsetX:像素值,值为正数,向右移动阴影;值为负数,向左移动阴影

shadowOffsetY:像素值,值为正数,向下移动阴影;值为负数,向上移动阴影

shadowBlur:模糊值,值越大,阴影边缘越模糊

3、绘制图片

canvas有一项特性是图像操作能力。可以用于动态的图像合成或者作为图形的背景,以及游戏界面等等。浏览器支持的任意格式的外部图片都可以使用,比如PNG、GIF或者JPEG。 甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。

引入图像到canvas里需要以下两步基本操作:

  1. 获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源,也可以通过提供一个URL的方式来使用图片
  2. 使用drawImage()函数将图片绘制到画布上
function draw() {
    var ctx = document.getElementById('myCanvas').getContext('2d');
    var img = new Image();
    img.onload = function(){
      ctx.drawImage(img,0,0);
    }
    img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
  }

其中drawImage 方法有三种形态:

drawImage(img,x,y):img 是 image 或者 canvas 对象,x 和 y 是其在目标 canvas 里的起始坐标

drawImage(img,x,y,width,height):这个方法多了2个参数,用来规定图像的宽度和高度

drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight):这种有8个新参数,用于控制做切片显示的;前4个是定义图像源的切片位置和大小,后4个则是定义切片的目标显示位置和大小

四、利用canvas下载图片

实现原理是使用drawImage()方法将图片画在画布上,然后调用toDataURL()方法,该方法返回一个包含图片展示的数据URL。具体实现如下:

function downloadFn(url){
  var Img = new Image(); //创建img实例
  Img.setAttribute('crossOrigin', 'anonymous'); //解决跨域Canvas污染问题
  Img.src=url;
  Img.onload=function(){ //图片加载是异步的,需要确保图片能够完整获取到
    var canvas = document.createElement('canvas'); //创建canvas元素
    canvas.width=Img.width, //设置canvas的宽高和图片一致
    canvas.height=Img.height;
    var context = canvas.getContext('2d');
    context.drawImage(Img,0,0,Img.width,Img.height); //绘制图片
    var dataURL=canvas.toDataURL('image/png'); //转换图片为dataURL
    var a = document.createElement('a'); //创建a标签,用于下载图片
    a.download = '图片';
    a.href = dataURL;
    a.click();  //触发点击下载
  };
}


相关文章
|
存储 XML JavaScript
【通用行业开发部】JavaScript 高程学习 C1~C7
JavaScript 高级程序设计 第三版 内容精要概览 第一章至第七章内容
229 0
【通用行业开发部】JavaScript 高程学习 C1~C7
|
机器学习/深度学习 人工智能 文字识别
【前沿技术RPA】 一文学会用UiPath实现PDF自动化——锚点基准活动
UiPath在传统的RPA(Robotic process automation)的基础上,增加了See(AI通过计算机视觉阅读用户的计算机屏幕)和Think(通过机器学习来发现平台能够为用户构建什么自动化流程)从而不断帮助用户自动化构建流程,而不仅仅是用户自主发现,自主构建。并且在构建的过程当中,做到了Low-code甚至是No-code的程度,让每一位员工都可以自主使用。
【前沿技术RPA】 一文学会用UiPath实现PDF自动化——锚点基准活动
|
存储 人工智能 算法
自媒体影视后期数字助理3--绿幕分割中间件设计
阿里云提供的线上AI能力在处理视觉信息方面已经有较为成熟和通用的产品,对于开始兴建媒体资源管理平台的自媒体来说,采用阿里云的AI能力、函数计算以及OSS等产品进行平台搭建可以快速实现建设与能力扩充。本文为SDR与HDR中间件的开发思路、技术架构设计和开发实战中参数的设置介绍,对一些数字影像的基础概念和阿里云视觉人工智能的API细节进行了分析。
599 15
自媒体影视后期数字助理3--绿幕分割中间件设计
|
人工智能 供应链 算法
进入高度定制化的行业赛道
进入高度定制化的行业赛道
141 0
|
Web App开发 前端开发 .NET
[免费活动通知][杭州]微软技术创新日-秀出新网‘视’界+全方位数字体验
活动报名页面:http://msdn.microsoft.com/zh-cn/ee453670.aspx 本次活动面向开发人员,希望有兴趣的朋友前往参加 另外高校的朋友也可给我留言,11月底前会有3场高校微软技术职业规划讲座,敬请关注!   ...
1341 0
|
存储 编解码 人工智能
自媒体影视后期数字助理--视频调色中间件设计
阿里云提供的线上AI能力在处理视觉信息方面已经有较为成熟和通用的产品,对于开始兴建媒体资源管理平台的自媒体来说,采用阿里云的AI能力、函数计算以及OSS等产品进行平台搭建可以快速实现建设与能力扩充。本文为调色中间件的开发思路、技术架构设计和开发实战中参数的设置介绍,对一些数字影像的基础概念和阿里云人工智能视觉生产的API细节进行了分析。
428 10
自媒体影视后期数字助理--视频调色中间件设计
|
前端开发 Swift iOS开发
SwiftUI直通车系列(1)—— 视图的布局与组织
SwiftUI直通车系列(1)—— 视图的布局与组织
228 0
SwiftUI直通车系列(1)—— 视图的布局与组织

热门文章

最新文章