怎样在html5中添加canvas标签_IT百科

<canvas>标签是 HTML 5 中的新标签。

定义和用法

<canvas>标签定义图形，比如图表和其他图像。

<canvas>标签只是图形容器，您必须使用脚本来绘制图形。

实例

通过 canvas 元素来显示一个红色的矩形：

<!DOCTYPE HTML>

<html>

<head>

var canvas=document.getElementById('myCanvas')

var ctx=canvas.getContext('24d')

ctx.fillStyle='#FF0000'

ctx.fillRect(0,0,80,100)

</script>

</head>

<body>

<canvas id="myCanvas">your browser does not support the canvas tag </canvas>

</body>

</html>

接下来，我们来看一下除了arc方法以外，其他使用路径绘制图形时会使用的方法。首先从绘制直线开始。

绘制直线一般会用到2个方法，分别是moveTo方法，lineTo方法

1. moveTo方法

moveTo方法的作用是将光标移动到指定的位置，绘制直线的时候以这个坐标为起点。使用如下：moveTo（x,y）

该方法有2个参数，x指指定左标的横坐标，y指指定坐标的纵坐标。

2. lineTo方法

lineTo方法是指在moveTo方法指定直线的起点和指定直线终点之间绘制一条直线。使用如下：

lineTo（x,y）

该方法的2个参数和moveTo方法的参数意义一样。使用该方法绘制完直线后，光标会自动移到lineTo指定的直线的终点。

因此，在创建路径时，需要使用moveTo方法将光标移动到指定的直线起点，使用lineTo方法在直线起点和直线终点之间创建路径，然后将光标移动到指定直线终点。

运行结果：

欢迎分享，转载请注明来源：内存溢出

怎样在html5中添加canvas标签