HTML5 Canvas(画布)

标签定义图形,比如图表和其他图像,你必须用脚本来绘制图形。

在画布上( Canvas )画一个共红色矩形,渐变矩形,彩色矩形,和一些彩色文字。

HTML5 Canvas(画布)_第1张图片

什么是 Canvas?

HTML5元素用于图形绘制,通过脚本(通常是 Javascript)来完成。

标签是图形容器,必须使用脚来绘制图形。

你可以通过很多方法使用canvas来绘制路径,盒,圆、字符以及图像。

创建一个画布( Canvas )

一个画布在网页中是一个矩形框通过 元素来绘制。

注意:默认情况下元素没有边框内容

注意:标签通常需要一个指定 id 属性( 脚本中经常引用 ),width 和 height属性定义的画布的大小,也可以使用 style属性添加边框。

使用 Javascript 来绘制图像

canvas 元素本身是没绘图能力。所有的绘制工作必须在 Javascript 内完成

var canvas = documnet.getElementById("mycancas")

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

ctx.fillStyle = '#000000'

// fillStyle :属性是填充 CSS背景 渐变  默认是:"#000000"


ctx.fillRect(0,0,150,75) 

/*
参数1:x坐标
参数2:y坐标
参数3:宽
参数4:高
*/

canvas坐标

canvas是一个二维网格

canvas的左上角坐标为(0,0)

上面的 fillRect 方法拥有参数(0,0,,150,75)

意思是:在画布上绘制 150*75的图形,从左上角(0,0)开始

坐标实例

如下图所示,画布的 X 和 Y 坐标用于在画布上对绘画进行定位。鼠标移动的矩形框上,显示定位坐标。

HTML5 Canvas(画布)_第2张图片

 Canvas - 路径

在 canvas 上画线,我们可以使用这两种方法:

moveTo(x,y)定义线条开始坐标

lineTo(x,y)定义线条结束坐标

strock()绘制线条的方法

var canvvas = document.getElementById('mycanvas')

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

//绘制坐标的起始位置  参数一:x轴  参数二:y轴

ctx.moveTo(0,0)

//绘制坐标的结束位置  参数一:x轴  参数二:y轴

ctx.lineTo(200,100)

//开始绘制图表

ctx.stroke()

HTML5 Canvas(画布)_第3张图片

在 canvas 中绘制图形,我可以将方法以下方法:

arc(x,y,r,start,stop)

实际上我们可以 strke() 或者 fill()

使用 arc() 方法绘制一个圆:

var canvas = documnet.getElementById('mycanvas')

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

// 使用 beginPath() 开始绘画

ctx.beginPath()

// 使用 arc() 开始绘制

ctx.arc(150,40,20,0,2*Math*PI)

/*
参数一:x轴的位置
参数二:y轴的位置
参数三:半径的位置
参数四:圆的起始位置
参数五:圆的结束位置
*/

// 结束绘画

ctx.stroke()

HTML5 Canvas(画布)_第4张图片

 Canvas - 文本

使用 canvas 绘制文本,重要的属性和方法如下:

font - 定义字体

filltext( text,x,y ):在 canvas 上绘制实心的文本

sreokeText( text,x,y ):在 canvas 上绘制空心的文本

// 绘制实心的文本

var canvas = document.getElementById('mycanvas')

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

// 字体大小为 30 px

ctx.font = '30px Arial'

ctx.fillText(' Eoklee ',15,50)

/*
fillText()
参数一:添加文字的内容
参数二:x轴的位置
参数三:y轴的位置
*/

// 绘制空心的文本

var canvas = document.getElementById('mycanvas')

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

// 字体大小为 30 px

ctx.font = '30px Arial'

ctx.strokeText(' Eoklee ',15,50)

/*
strokeText()
参数一:添加文字的内容
参数二:x轴的位置
参数三:y轴的位置
*/-

你可能感兴趣的:(html5,前端,html)