canvas(画布)
1、 HTML5提供的新元素
2、 Canvas在HTML页面提供画布的功能,可以在页面中绘制各种图形
3、 canvas绘制的图形与HTML页面无关
无法通过DOM获取绘制的图形
无法为绘制的推行绑定DOM事件
4、 只能使用canvas提供的API
5、 主要用途
在HTML页面中绘制图标(例如柱状图、饼状图等)
网页游戏 - Flash技术
使用HTML5中的canvas
使用canvas
-
在页面中定义 <canvas>
默认宽度 300*150
效果上类似于div问题： 定义canvas元素的宽度和高度 style设置-绘制图形被拉伸 解决方法： 直接在canvas里写width 和height的值 -
获取<canvas>元素
document.getElementsByTagName('canvas')[0]; document.querySelector('canvas'); -
获取画布对象
getContext("2d"); 参数类型是string类型，参数必须是“2d”或“3d”(固定写法) -
使用Canvas提供的API
context.fileRect(x,y,width,height);
Canvas(画布) - API使用
API提供的工具非常广泛，包括创建图形、颜色、文本等
-
矩形
1）绘制实心矩形
fillRect(x,y,width,heigth)2）绘制空心矩形
strokeRect(x,y,width,heigth)3）清除指定区域的像素，类似于橡皮擦
clearRect(x,y,width,height) -
设置颜色 - 如果在创建图像时，没有指定颜色，那么所有图形都会使用纯黑色
1）声明形状线条的颜色 - strokeStyle
2）声明形状内部区域的颜色 - fillStyle
3）透明度属性。可以设置画布上图形的透明度 - globalAlpha
-
渐变效果 - canvas支持的渐变效果包括线性渐变或射线渐变，并且支持颜色转折点
1）在画布上创建一个渐变对象
var grd = context.createLinearGradient(x1,y1,x2,y2) x1,y1 - 基准线的起点坐标值 x2,y2 - 基准线的终点坐标值 var grd = context.createRadialGradient(x1,y1,r1,x2,y2,r2) x1,y1 - 第一个基准圆的元素坐标值 r1 - 第一个基准圆的半径 x2,y2,r2同上 返回一个渐变对象
*** 注意：上面所有的坐标都是相对于 canvas对象的坐标 ***
2）给渐变对象指定渐变颜色值
addColorStop(position,color)
position - 指设置渐变颜色的位置(0-1)
3） 将渐变对象作为画布对象的颜色
context.fillStyle = grd;
4） 绘制矩形
context.fillRect(0,0,400,400);