HTML5——Canvas画布的使用方法

一、概述

作用——利用HTML5中提供的画布功能，通过Canvas实现各种图形。

注意：js事件不能绑定到画布中的图形上，只能为元素绑定事件。

二、画布的使用

1、html页面中使用定义画布

2、使用js获取canvas元素，并调用getContext("2d")方法得到画布对象

3、使用画布提供的API方法绘制图形

4、绘制图形的方法

绘制矩形：

fillRect（x,y,width,height）--绘制实心矩形

x和y--矩形左上角的坐标值

width和height--矩形的宽与高

strokeRect(x,y,width,height)--绘制空心矩形

属性含义同上

clearRect（x,y,width,height）--清除制定矩形区域

属性含义同上

小案例：

</html>

绘制效果：

设置颜色：

fillStyle--设置填充颜色

strokeStyle--设置描边颜色

globalAlpha--设置透明度(0-1)

小案例：设置彩色矩形

 
 


 
 

绘制效果：

设置渐变

线性渐变：createLinearGradient(x1,y1,x2,y2)

x1,y1 - 基准线的起点坐标值

x2,y2 - 基准线的终点坐标值

线性渐变根据基准线实现渐变效果

扇形渐变：createRadialGradient(x1,y1,r1,x2,y2,r2);

x1和y1 - 第一个圆的圆心坐标值
r1 - 第一个圆的半径
x2和y2 - 第二个圆的圆心的坐标值
r2 - 第二个圆的半径

扇形渐变根据基准圆实现扇形渐变

设置渐变：addColorStop(position,color)

position - 设置颜色的位置(0-1)

color - 设置的颜色

注意：该方法由渐变对象调用，而不是画布对象调用

线性渐变小案例：

三种运行效果分别为：

扇形渐变小案例：

ml>

两种运行效果分别为：