HTML5应用:画布<Canvas>工具

目录

1.画布<Canvas>标签定义

2.画布<Canvas>工具对象、坐标、路径和填充

3.使用画布<Canvas>绘制图形

4.使用画布<Canvas>绘制文字

5.使用画布<Canvas>绘制特效


画布是HTML5新增的标签元素.画布<Canvas>工具允许通过脚本语言动态渲染绘制图形,例如:可以用画布<Canvas>标签实现画图、合成图像或者制作动画等功能。

Canvas的绘制区域有HTML代码定义的宽度和高度属性决定,Canvas有一套完全基于Javascript脚本语言绘制的应用程序接口,用过该接口可以访问Canvas的绘图区域,并完全绘图和生成图形的操作。

1.画布<Canvas>标签定义

<canvas id="id_canvas" width="150" height="150"></canvas>

定义<canvas>元素一般需要宽度“width”属性和“height"属性,当然者两个属性可选,还可以用DOM属性或者CSS来设置。默认是"width"=300px   ”height“=150px;

很多老的浏览器并不支持Canvas特性,这是需要对支持Canvas特性的浏览器给出提示:

<canvas id="id_canvas" width="150" height="150">浏览器不支持Canvas元素</canvas>

2.画布<Canvas>工具对象、坐标、路径和填充

画布<canvas>区域其实是一个二维网格,其左上角的坐标为(0,0),因此也是画布的基点坐标。

画布<canvas>工具常用的路径方法如下:
moveTO(x, y)方法定义线条开始的坐标
lineTO(x, y)方法定义线条结束的坐标
arc(x, y, r, start, stop)方法定义画圆

 

画布<canvas>工具常用的填充方法如下:
fillRect(x, y, width, height)方法进行填充矩形画图操作
fil()方法进行填充画图操作

 

当<canvas>标签元素被添加到HTML5页面上的时候,初始化渲染是空白的。在通过JavaScript脚本语言进行图形绘制操作之前,先要获得渲染的上下文对象。具体是通过Canvas对象的getContext()方法获取的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title> Javascript Canvas</title>
		<script type="text/javascript">
			window.onload = function() {     //资源加载结束后触发
				var canvas =document.querySelector("canvas");  //获取canvas元素
				if(canvas.getContext){   //判断上下文对象是否有效
					var ctx = canvas.getContext("2d");   //获取渲染上下文
					ctx.fillStyle = "#6A6AA7";  //填充颜色
					ctx.fillRect(50,50, 200,200);  //绘制图形
				}
			}
		</script>
	</head>
	<body>
		<canvas width="300" height="300">浏览器不支持canvas工具</canvas>
	</body>
</html>

 

3.使用画布<Canvas>绘制图形

画布<Canvas>工具拥有很强大的绘图功能,基本可以实现绝大多数的二维图形效果。下面提供一些较为常用的绘图函数:

 

常用的绘图函数
方法变量解释

1. rect(x, y, width, height)方法,用于创建矩形

  • x: 矩形左上角的x坐标;
  • y: 矩形左上角的y坐标;
  • width: 矩形的宽度,单位是像素;
  • height: 矩形的高度,单位是像素;

2.fillRect(x, y, width,  height)方法,绘制被填充的矩形

3. strokeRect(x, y, width, height)方法,用于绘制矩形(无填充)

4. fill()方法,填充当前绘图(路径).

 

5. stroke()方法, 绘制自己定义的路径.

 

6. beginPath()方法, 其实一条路径,或重置当前路径

 

7. moveTo(x, y)方法, 把路径移动到画布中指定点,不创建线条,

  • x: 路径的目标位置的x坐标;
  • y: 路径的目标位置的y坐标;

8. closePath()方法,创建从当前点回到起始点的路径.

 

9. lineTo(x, y)方法,添加一个人新点,然后在画布中创建从该点到最后指定点的线条

  • x: 路径的目标位置的x坐标;
  • y: 路径的目标位置的y坐标;

10. arcTo(x1, y1, x2, y2, r)方法,用于创建两切线之间的弧线或曲线

  • x1 : 弧起点的x坐标;
  • y1 : 弧起点的y坐标;
  • x2 : 弧终点的x坐标;
  • y2 : 弧终点的y坐标;
  • r : 弧的半径;
11. arc(x, y, r, sAngle, eAngle,  counterclockwise)方法, 用于创建弧线或者曲线.
  • x: 圆中心的x坐标;
  • y: 圆中心的y坐标;
  • r: 圆半径;
  • sAngle: 起始角, 以弧度计(弧的圆形的三点钟位置是0度);
  • eAngle: 结束角, 以弧度计;
  • countercolckwise: 可选,规定逆时针或顺时针方向绘图.true表示逆时针,false表示顺时针.

 

4.使用画布<Canvas>绘制文字

 


 

Canvas绘制文职的函数
方法变量解释
1.fillText(text, x, y, maxWidth)方法,用于绘制带有填充颜色的文本
  • text: 文本内容;
  • x: 相对于画布的x轴坐标;
  • y: 相对于画布的y轴坐标;
  • maxWidth: 可选, 允许的最大文本宽度,以像素计;
2. strokeText(text, x, y,maxWidth)方法, 用于绘制无填充颜色的文字.

5.使用画布<Canvas>绘制特效

Canvas关于特效功能的属性和方法
方法变量说明
1. fillStyle属性, 设置用于填充绘图的颜色、渐变或模式。 
2. strokeStyle属性, 设置用于笔触的颜色、渐变或模式。 
3. shadowColor属性, 设置用于阴影的颜色。 
4. shadowBlur属性, 设置用于阴影的模糊级别。 
5. shadowOffsetX属性, 设置阴影距离形状的水平距离。 
6. shadowOffsetY属性, 设置阴影距离形状的垂直距离。 
7. creatRadialGradient(x0, y0, x1, y1)方法,用于创建线性渐变(用于画布内容)。
  • x0: 渐变开始点的x坐标;
  • y0: 渐变开始点的y坐标;
  • x1: 渐变j结束点的x坐标;
  • y1: 渐变结束点的y坐标;

 

8. createLinearGradient(x0, y0, r0, x1, y1, r1)方法,创建放射状或环形的渐变(用于画布内容)。
  • x0: 渐变开始圆的x坐标;
  • y0: 渐变开始圆的y坐标;
  • r0: 开始圆的半径;
  • x1: 渐变结束圆的x坐标;
  • y1: 渐变结束圆的y坐标;
  • r1: 结束圆的半径

 

 

 

 

 

 

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值