HTML5有两个主要的2D图形技术:Canvas和SVG。
- Canvas是使用JavaScript动态生成的,SVG是使用XML静态描述的。
- Canvas是基于“位图”的,适合于像素处理和动态渲染,放大图形会使图形失真
- SVG是基于“矢量”的,不适合于像素处理和适合静态描述,放大图形不会使图形失真
- 使用Canvas绘制出来的是一个“位图”,而使用SVG绘制出来的是一个“矢量图”
- 如果发生修改,使用Canvas需要重绘,而使用SVG不需要重绘
- 在实际开发中,需要根据需求选择其中一种
Canvas元素
使用Canvas元素来绘制图形,需要以下3步:
- 获取Canvas对象
- 获取上下文环境对象context
- 开始绘制图形
代码示例:
说说
- 在Canvas中,我们使用document.getElementById()方法来获取Canvas对象-是一个DOM对象
- 使用Canvas对象的getContext("2d")方法获取上下文环境对象context
- 使用context对象的属性和方法来绘制各种图形
Canvas元素介绍
Canvas元素是一个行内块元素,是inline-block
其属性3个:id,width和height
width和height分别用于定义Canvas元素的宽度和高度
默认情况下,Canvas元素的宽度为300px,高度为150px
修改Canvas的宽度和高度
在HTML属性中定义,或是在CSS样式中定义,建议不在CSS样式中定义,而在HTML属性
如下点击Canvas图形:获取宽度和高度
定义一个宽度为200px,高度为150px的Canvas图形
如果在CSS样式中定义,Canvas元素的宽度和高度是默认值,而不是所定义的宽度和高度,这样我们就无法获取Canvas元素正确的宽度和高度。所以要获得宽度和高度,一定要在HTML属性中定义。
Canvas对象
在Canvas中,我们使用document.getElementById()来获取Canvas对象
Canvas对象的常用属性
属性 |
说明 |
width |
Canvas对象的宽度 |
height |
Canvas对象的高度 |
Canvas对象的常用方法
属性 |
说明 |
getContext("2d") |
获取Canvas2D上下文环境对象 |
toDataURL() |
获取Canvas对象产生的位图的字符串 |
- 使用cnv.width和cnv.height分别获取Canvas对象的宽度和高度
- 使用cnv.getContext("2d")来获取Canvas 2D上下文环境对象
- 使用toDataURL()来获取Canvas对象产生的位图的字符串
- cnv指的是☞Canvas对象
在Canvas中,使用getContext("2d")来获取Canvas 2D上下文环境对象,这个对象称为context对象。
直线图形
常见的直线图形有以下3种:
- 直线
- 矩形
- 多边形
Canvas坐标系
学习Canvas最基本的前提是学习使用Canvas使用的坐标系
我们学习常见的坐标系叫数学坐标系,而Canvas使用的坐标系是W3C坐标系
- 数学坐标系:y轴正方向向上
- W3C坐标系:y轴正方向向下
记住:W3C坐标系的y轴正方向是向下的。
直线绘制
在Canvas中,使用moveTo()和lineTo()两个方法可以来画直线,利用这两个方法,我们可以画一条直线,也可以画多条直线。
一条直线
- cxt表示上下文环境对象context
- (x1,y1)表示直线“起点”的坐标
- moveTo(x1,y1)的含义是“将画笔移到点(x1,y1)位置,然后开始绘图
- (x2,y2)表示直线“终点”的坐标
- lineTo(x2,y2)的含义是“使用画笔从起点(x1,y1)开始画直线,一直画到终点(x2,y2)
- moveTo()和lineTo(),仅仅确定直线的“起点坐标”和“终点坐标”,但实际上画笔还没画
- 调用上下文环境对象的stroke()方法才有效
点击图形☞
多条直线
使用moveTo()和lineTo()这两个方法可以画一条直线,其实,也可以画多条直线。
语法:
说明:
lineTo()方法是可以重复使用的
- 第一次使用lineTo()后,画笔会自动移到终点
- 第二次使用lineTo()后,Canvas会以“上一个终点的坐标”作为第二次调用的起点,开始画直线
示例:
点击图形☞
- moveTo():将画笔移到该点的位置,然后开始绘图
- lineTo():将画笔从起点开始画直线,一直到终点
用直线画一个三角形
提示:画三角形前,要先确定三角行3个顶点的坐标
点击图形☞
用直线画一个矩形
点击图形☞
画一个矩形,使用moveTo()和lineTo()方法有点麻烦,可以使用Canvas提供的独立方法。
在Canvas中,矩形分两种:
- 描边矩形
- 填充矩形
描边矩形:使用这两种方法:strokeStyle属性和strokeRect()方法,来画一个描边矩形。
- strokeStyle属性
- strokeRect()方法
语法:
- strokeStyle是context对象的一个属性
- strokeRect()是context对象的一个方法
strokeStyle属性
strokeStyle属性取值有3种:颜色值,渐变色和图案。
示例:
strokeRect()方法
strokeRect()方法:(x,y)表示矩形左上角的坐标,width表示矩形的宽度,height表示矩形的高度,默认情况下 width 和 height 都是以px为单位的。
记住:strokeStyle属性必须在使用strokeRect()方法之前定义,否则strokeStyle属性无效。
点击图形☞
记住cxt.strokeStyle="red";和cxt.strokeRect(50,50,100,100);这两句代码位置不能互换,否则就不会生效了。
填充矩形
- 使用fillStyle属性和fillRect()方法来画一个填充矩形
说明:
-
fillStyle是context对象的一个属性
-
fillRect()是context对象的一个方法
-
fillStyle属性,取值有3种:颜色值,渐变色,图案
-
fillRect()方法:(x,y)是矩形左上角的坐标,width表示矩形的宽度,height表示矩形的高度
记住:填充矩形的fillStyle属性必须在fillRect()方法之前定义
点击图形☞
示例描边矩形和填充矩形
点击图形☞
fillStyle属性取不同的颜色值
点击图形☞
rect()方法
在Canvas种,绘制一个矩形,使用strokeRect()和fillRect()这两个方法外,还可以使用rect()方法。
rect(x,y,width,height);
- x和y为矩形左上角的坐标
- width表示矩形的宽度
- height表示矩形的高度
strokeRect(),fillRect(),rect()这3个方法可以画矩形。
strokeRect()和fillRect()两个方法在被调用之后,会立刻把矩形绘制出来,而使用rect()方法在被调用之后,不会立刻绘制出来,只有使用stroke()和fil()方法,才会把矩形绘制出来
rect()方法
点击图形☞
清空矩形
在Canvas中,可以使用clearRect()方法来清空“指定矩形区域”
语法:
说明:
- x,y分别表示被清空矩形区域左上角点的横纵坐标
- width表示矩形的宽度,height表示矩形的高度
使用clearRect()方法来清空指定矩形区域
点击图形☞
所有Canvas图形操作的属性和方法都是基于context对象的
多边形
多边形是使用moveTo()和lineTo()这两个方法画出来的,矩形有专门用来绘制的方法,而没有专门用来绘制三角形和多边形的方法。
箭头
点击图形☞
正三角形
根据正三角形的特点:封装一个绘制正多边形的函数createPolygon()
点击图形☞
五角星
点击图形☞
绘制调色板
方格调色
点击图形☞
需求两层for循环来绘制方格阵列,每个方格使用不同的颜色,其中变量i和j,用来为每一个方格产生唯一的RGB色彩值。
渐变调色板
点击图形☞
曲线图形
在Canvas中,基本图形包含两种:
- 直线图形
- 曲线图形
曲线图形,一般分两种情况:
- 曲线
- 弧线:是圆的一部分
图形
在Canvas中,可以使用arc()方法来画一个圆
- 先调用beginPath()方法来声明“开始一个新路径”
- 使用arc()方法画圆
- closePath()方法来关闭当前路径
- beginPath()表示“开始路径”,closePath()表示“关闭路径”
- beginPath()和closePath()一般都是配合使用的
- x表示圆心横坐标,y表示圆心纵坐标。(x,y)表示圆心坐标
- 开始角度,结束角度:开始角度和结束角度都是以弧度为单位。如180°写成Math.PI
- 推荐写法120*Math.PI/180
- anticlockwise:anticlockwise是一个布尔值,当值为true,表示按逆时针方向绘制,当值为false,表示按顺时针方向绘制。
描边圆
在Canvas中,我们可以使用stroke()方法来绘制一个“描边的圆”
- strokeStyle属性用于定义边框颜色
- stroke()方法用于执行描边动作
点击图形☞
开始路径,arc()画圆,结束路径,描边操作
点击图形☞
填充圆
在Canvas中,使用fill()方法来绘制一个“填充的圆”
- fillStyle属性用于定义填充的颜色
- fill()方法用于定义填充动作
点击图形☞
整圆在后,会覆盖半圆的
弧线
arc()方法画弧线
在Canvas中,arc()方法不仅可以用于画圆形,还可以用于绘制弧线
- (x,y)表示圆心坐标
- anticlockwise取值表示“是否逆时针"
- 默认情况下,anticlockwise取值为false
- 当anticlockwise取值为true时,表示按逆时针方向绘制
- 当anticlockwise取值为true时,表示按逆时针方向绘制
- 当anticlockwise取值为false时,表示按顺时针方向绘制
arc()方法画弧线时,不使用closePath()方法来关闭路径,因为弧线不是一个闭合圆形,而closePath()方法用于绘制闭合图形的.
使用arc()方法画弧线
点击图形☞