H5新特性：canvas学习1

1.canvas介绍

<canvas>是HTML5中新增的元素，通过标签可以在页面中生成一个块画布，在这块画布上可以使用Javascript来绘制图形或者实现图形动画。

canvas标签只有两个属性：width和height，设置画布的宽高。如果不设置，它会在页面上默认一个300*150的画布区域。

2.canvas的使用

    <!-- canvas标签只有两个属性：width,height 默认的宽高分别为300*150 --><canvas width="300" height="300" class="canvas"></canvas><script>//1.获取canvas元素const cvs = document.querySelector(".canvas");//2.使用getcontext()方法获取canvas的上下文元素,getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 const cxt = cvs.getContext("2d");//3.fillRect(x,y,width,height)方法定义当前矩形的填充方式。x:x轴；y:y轴； width: 填充的宽度； height: 填充的高度cxt.fillRect(0, 0, 150, 150);</script>

3.渲染上下文

（1）getContext()方法获得渲染上下文是可以选择上下文类型的。

2d:创建一个二维平面的渲染上下文
webgl:三维的渲染上下文

（2）getContext('2d')返回的是一个CanvasRenderingContext2D对象，在绘图过程中使用的一些绘制方法、设置绘制属性都来自于这个CanvasRenderingContext2D对象

4.canvas坐标

canvas是一个二维网格，canvas左上角的坐标为(0,0)

fillRect(0,0,150,75) 的意思就是：在画布上绘制一个150*75的矩形，坐标从(0,0)开始绘制

5.canvas路径

在canvas绘制路径，需要用到两种方法：

moveTo(x,y) 路径（线段）的开始坐标

lineTo(x,y) 路径（线段）的结束坐标

最后需要stroke()方法来描绘路径

lineWidth：设置线条的宽度

strokeStyle：设置线条的颜色

设置线条的末端样式：lineCap，可选值有 butt、round、square。默认为butt，如果设置了非butt样式，线条会在末端增加线条宽度一半的长度。

cxt.beginPath()开启一条新的路径

<canvas class="canvas" width="500" height="500">您的浏览器不支持canvas,请升级</canvas><script>const cvs = document.querySelector('.canvas');const cxt = cvs.getContext('2d');一条线段的绘制//1.线段的开始坐标cxt.moveTo(20, 20)//2.线段的结束坐标cxt.lineTo(100, 20)//4.第二条线段的绘制（与第一条线段平行）cxt.moveTo(20, 40);cxt.lineTo(100, 40);//3.调用stroke()方法实现线段的绘制cxt.stroke()一个正方形的绘制cxt.moveTo(20, 20); //开始坐标，第一条线段的起点cxt.lineTo(100, 20); //第一条线段的终点，也是第二条线段的起点cxt.lineTo(100, 100); //第二条线段的终点，也是第三条线段的起点cxt.lineTo(20, 100); //第三条线段的终点，也是第四条线段的起点cxt.lineTo(20, 20); //第四条线段的终点，也是第一条线段的起点cxt.stroke(); //调用stroke()方法实现线段的绘制开启一条新的路径cxt.beginPath();//开启一条新的路径cxt.moveTo(20, 20) cxt.lineTo(180, 20)cxt.lineCap = 'round' //设置线条末尾的样式cxt.lineWidth = 10 //设置线条的宽度cxt.strokeStyle = 'red' //设置线条的样式cxt.stroke()绘制一个网格//将canvas画布绘制成一个网格const gap = 50; //每个小网格的宽高const horizontollNum = Math.floor(cvs.width / gap); //水平方向的线条数目const vertailcNum = Math.floor(cvs.height / gap); //竖直方向的线条数目for (var i = 1; i < horizontollNum; i++) {cxt.moveTo(i * gap, 0)cxt.strokeStyle = '#ddd'cxt.lineTo(i * gap, cvs.height)cxt.stroke()for (let j = 1; j < vertailcNum; j++) {cxt.moveTo(0, j * gap)cxt.lineTo(cvs.width, j * gap)cxt.strokeStyle = '#ddd'cxt.stroke()}}
</script>

6.canvas绘制矩形

(1)调用rect(x,y,width,height)方法，可以创建一个矩形路径，只需要确定矩形左上角距离坐标轴原点的x、y轴的距离，确定矩形的宽高就能在指定位置出绘制一个矩形。

//调用rect(x,y,width,height)方法，绘制一个矩形。位置在(20,20) 宽高为100的矩形
cxt.rect(20, 20, 100, 100);
cxt.lineWidth = 10;
cxt.strokeStyle = "red";
cxt.fillStyle = 'orange'; //设置填充颜色
cxt.stroke(); //遇到stroke就是描绘的
cxt.fill(); //遇到fill就是进行填充的

(2)调用fillRect(x,y,width,height)方法直接绘制一个填充的矩形

cxt.fillRect(20, 20, 100, 100)

(3)调用strokeRect(x,y,width,height)方法，直接绘制一个描边的矩形

cxt.strokeRect(20, 20, 100, 100)

7.canvas动画

(1)clearRect(x,y,width,height)清除指定的区域

x，y：要清除的矩形左上角x,y坐标

width,height：要清除的矩形的宽高

(2)实现canvas动画的步骤总共有三个步骤：

清除画布
更改坐标位置，或者其他信息，颜色等
重新进行绘制

1.使用定时器实现canvas动画
let x = 20;
//clearRect(x,y,width,height) 清空画布上指定的区域
function animate() {setInterval(() => {cxt.clearRect(0, 0, cvs.width, cvs.height)x += 1cxt.fillRect(x, 20, 100, 100)}, 20)
}
animate()2.使用关键帧实现canvas动画
let x = 20;
function animate() {cxt.clearRect(0, 0, cvs.width, cvs.height)x += 2cxt.fillRect(x, 0, 100, 100)window.requestAnimationFrame(animate)
}
animate()

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

用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学习1

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

最新文章

热门文章