H5新特性：canvas学习2

1.canvas绘制文本

①canvas绘制文本需要用到的两个方法：fillText() strokeText()

参数一：text 文本内容

参数二：x 文本的起始x轴坐标

参数三：y 文本的起始y轴坐标

参数四：maxWidth：可选参数，文本在画布上的最大宽度，如果指定了该值，文本宽度超出的话会自动水平缩放

//1.fillText('xxx',x,y,maxWidth)
cxt.fillText('前端要分享', 50, 50);
//2.strokeText('xxx',x,y,maxWidth)
cxt.strokeText('前端要分享', 50, 100);

②在绘制文本之前，可以给文本设置一些样式

ctx.font：绘制文本时可设置文本的字体样式，默认字体样式是 10px sans-serif

ctx.font = "48px serif"

ctx.textAlign：绘制文本时设置文本的水平方向的对齐方式，默认是左对齐，即文本在坐标点右侧，它的值有：

left：文本在坐标点点右侧，坐标点在文本左侧

right：文本在坐标点左侧侧

center：文本中间位置在坐标点

start：同left

end：同right

ctx.textBaseline：绘制文本时设置文本基线，决定文本垂直方向的对齐方式，默认是alphabetic，它的值有：

top：基线在文本的顶部

hanging：基线是悬挂基线

middle：基线在文本中间

alphabetic：基线是标准的字母基线

bottom：基线在文本的底部

2.canvas绘制圆弧

①绘制圆弧可以使用arc()方法，以(x,y)坐标点为圆心，绘制指定半径的的圆或圆弧

arc(x,y,r,startAngle,endAngle)

x：圆心点x轴坐标

y：圆心点y轴坐标

r：圆弧半径

startAngle：圆弧的起始弧度位置，单位以弧度表示 Math.PI

endAngle：圆弧的终止弧度位置，单位以弧度表示 Math.PI

directron：决定圆弧绘制的顺序默认 false 顺时针旋转。 true 逆时针旋转。

求圆上点的坐标：

const x = midpointX + radius*Math.cos(angle*Math.PI/180)
const y = midpointY + radius*Math.sin(angle*Math.PI/180)

3.canvas绘制图像

1.方法：drawImage()

2.将图像绘制在画布上，要等img加载完后再调用drawImage()方法，监听img的load事件，在load事件处理程序中调用drawImage()。

// 绘制图片的方法：drawImage(img,x,y)
//1.将图片原封不动绘制到画布上，有三个参数：参数一: img图片； 参数二：x 图片x轴位置； 参数三：y 图片y轴位置
const img = new Image();
img.src = './imgs/1.jpeg'//图片加载时的函数
img.onload = function() {//绘制图片cxt.drawImage(img, 50, 50)
}

3.drawImage()可以接收不同的参数

①三个参数：drawImage(img,x,y)

img: 目标图片 x,y:图片的位置

②五个参数：drawImage(img,x,y,width,height)

img：目标图片 x,y：图片的位置 width,height：设置图片的大小

//2.将图片按照特定的大小绘制到画布上：img(目标图片) x,y(图片位置) width,height(图片特定大小)
const img1 = new Image();
img1.src = './imgs/1.jpeg';img1.onload = function() {cxt.drawImage(img1, 360, 50, 150, 150)
}

③九个参数：drawImage(img,sourcex,sourcey,souceWidth,souceHeight,x,y,width,height) 常用于绘制雪碧图

img(目标图片) sourcex,sourcey(图片截取位置) souceWidth,souceHeight(图片截取大小) x,y(绘制图片位置) width,height(图片的大小=截取的图片大小)

//3.雪碧图截取，九个参数：img(目标图片) sourcex,sourcey(图片截取位置) souceWidth,souceHeight(图片截取大小) x,y(绘制图片位置) width,height(图片的大小=截取的图片大小)
const img2 = new Image();
img2.src = './imgs/2.jpeg';img2.onload = function() {cxt.drawImage(img2, 0, 0, 195.5, 196, 50, 360, 195.5, 196)
}

4.canvas状态的保存和恢复

1.方法：save()和restore()

save()：用于状态保存，无参数；Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。

restore()：用于状态恢复，无参数；每一次调用 restore 方法，上一个保存的状态就从栈中弹出，所有设定都恢复(类似数组的 pop())。

5.canvas画布变形

①canvas画布位移: translate(x,y) 可以改变坐标系的位移

x,y：表示移动后的坐标原点的位置

cxt.translate(100, 100) //将坐标系原点的位置从(0,0)变为(100,100)

②canvas画布旋转：rotate(angle) angle是弧度将1弧度转换为角度：angle*Math.fllor(1)/180

cxt.fillStyle = 'blue'
cxt.rotate(1) //cxt.rotate(angle*Math.floor(1)/180)
cxt.fillRect(0, 0, 100, 100)

③canvas画布的缩放：scale(x,y) x,y:分别对应x,y轴放大或者缩小的倍数缩放的本质是画布的缩放

cxt.fillStyle = 'blue';
cxt.scale(2, 2)
cxt.fillRect(100, 100, 100, 100)

H5新特性：canvas学习2相关推荐

用html5做的柱状图,使用h5新特性canvas简单生成一个柱状图
要展现一种数据,最直观的方式便是生成数据图,图例永远要比文字说明更加的清晰明了.因此,今天来生成一个利用canvas画布上的柱状图. 首先,先设置一个x,y轴,以便于柱状图的生成 var canvas ...
html5新特性表单控件,老生常谈h5新特性1:(表单)
老生常谈h5新特性1:(表单) HTML5新特性 -- 十大新特性 (1)新的语义标签和属性 (2)表单新特性 (3)视频和音频 (4)Canvas绘图 (5)SVG绘图 (6)地理定位 (7)拖放A ...
HTML5新特性的学习笔记
HTML5新特性的学习笔记 HTML 超文本标记语言: HyperText Markup Language 这份学习笔记的主要内容是HTML5的新标签基于菜鸟教程的个人向学习笔记菜鸟教程文章目录 ...
前端面试题二：ES6/7/8新特性、性能优化、数据交互、H5新特性
目录一.ES6/7/8新特性二.性能优化三.数据交互四.H5新特性一.ES6/7/8新特性 1.ES6中新增了哪些数据类型? Symbol类型(基本) Set类型(复杂) Map类型(复杂) ...
【面试】面试官：说一说H5新特性
H5 新特性 1.拖拽释放(Drap and drop) API ondrop拖放是一种常见的特性,即抓取对象以后拖到另一个位置在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放 2.自定义 ...
前端16天--IFC、BFC、H5新特性、选择器、伪类元素、扩展盒模型、圆角、盒子阴影等--2021/4/21
前端16天–IFC.BFC.H5新特性–2021/4/21 HTML5是HTML标准的最新演进版本: 1.是一个新的HTML语言版本包含了新的元素.属性和行为. 2.同时包含了一系列可以被用来让web ...
ES6新特性的学习和使用
ES6新特性的学习和使用本文是基于Windows 10系统环境,进行ES6新特性的学习和使用 Windows 10 React 一.ES6的新语法 (1) let和const ES6之后尽量少使用v ...
H5新特性（一）——音视频标签
H5新特性--音视频标签大家都有在网页中浏览音频和视频的经历,在HTML5之前,对视频和音频没有一个标准,因此在网页中看到的视频,都是通过第三插件的方式嵌入的,可能是QuickTime,也可能是 R ...
h5新特性DOMAST的简单理解
h5新特性 1.一些语义化标签 header.footer.nav.aside.article.section.hgroup(h1~h6的集合) document.createElement('hea ...
H5新特性有哪些？怎么理解语义化
H5新增了很多新的特性,这也成了我们面试的时候面试官喜欢问的一个问题,那我们可能在开发的过程中如果没有去关注过那也不是很清楚用到的是不是H5的新特性,下面我们就来讲一下 H5十大新特性 1.语义化标签 ...

H5新特性：canvas学习2

H5新特性：canvas学习2相关推荐

最新文章

热门文章