你的位置:首页 > 软件开发 > 网页设计 > HTML5画布(线条、渐变)

HTML5画布(线条、渐变)

发布时间:2015-04-10 17:00:33
绘制直线时,一般会用到moveTo与lineTo两种方法。案例1:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> ...

HTML5画布(线条、渐变)

绘制直线时,一般会用到moveTo与lineTo两种方法。

案例1:

<!DOCTYPE html></body>

注释:

(1)moveTo( x , y );

         该方法的作用是将光标移动到指定坐标点,绘制直线的时候以这个坐标点为起点;

(2)lineTo( x , y );

         该方法在moveTo方法中指定的直线起点与此参数中指定的直线终点之间绘制一条直线;

 

绘制线性渐变

案例1:

<!DOCTYPE html></body>效果图:

注释:

(1)cxt.createLinearGradient( xStart , yStart , xEnd , yEnd );

       xStart为渐变起始地点的横坐标,yStart为渐变起始地点的纵坐标;xEnd为渐变结束地点的横坐标;yEnd为渐变结束地点的纵坐标。

(2)cxt.addColorStop( offset , color );

        该方法可以追加渐变的颜色,因为是渐变,所以至少需要使用两次addColorStop方法以追加两个颜色(开始颜色与结束颜色),可以追加多个颜色,例如“从蓝色渐变到白色,然后渐变到绿色”。蓝色起始点坐标到白色终点坐标之间的距离与白色起始点到绿色终点坐标之间的距离相等,这时蓝色的位移量为0,白色的位移量为0.5,绿色的位移量为1。

        offset为所设定的颜色离开渐变起始点的偏移量,参数值是一个范围在0到1之间的浮点值,渐变起始点的偏移量为0,渐变结束点的偏移量为1;color为绘制时使用的颜色;

 

绘制径向渐变

案例1:

<!DOCTYPE html></body>效果图:

原标题:HTML5画布(线条、渐变)

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。