HTML5Canvas绘制渐变图

什么是 Canvas?

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
浏览器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 canvas 元素.
注意: Internet Explorer 8 及更早 IE 版本的浏览器不支持 canvas元素
创建一个画布(Canvas)
一个画布在网页中是一个矩形框,通过 (canvas) 元素来绘制.
注意: 默认情况下 (canvas) 元素没有边框和内容。
(canvas)简单实例如下:

<canvas id="Canvas" width="200" height="100"></canvas>

渐变对象

Context对象可以通过createLinearGradient()和createRadialGradient()两个方法创建渐变对象,这两个方法的原型如下:
线性渐变
Object createLinearGradient(x1, y1, x2, y2);
创建一个从(x1, y1)点到(x2, y2)点的线性渐变对象。
放射渐变
Object createRadialGradient(x1, y1, r1, x2, y2, r2);
创建一个从以(x1, y1)点为圆心、r1为半径的圆到以(x2, y2)点为圆心、r2为半径的圆的径向渐变对象。
渐变对象创建完成之后必须使用它的addColorStop()方法来添加颜色,该方法的原型如下:
void addColorStop(position, color);
其中position表示添加颜色的位置,取值范围为[0, 1],0表示起点,1表示终点;color表示添加的颜色,取值可以是任何CSS颜色值。
渐变对象创建并配置完成之后就可以将其赋予Context对象的strokeStyle属性或者fillStyle属性,然后绘制的图形就具有了所需的渐变效果。

绘制一个线性渐变



<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <style type="text/css">
        canvas{border:dashed 2px #CCC}
    </style>
   
    <body>
        <canvas id="can" width="400px" height="300px"></canvas>
         <script type="text/javascript">
    
            var can = document.getElementById("can");
            var cans = can.getContext('2d');
            //创建一个线性渐变对象
            var gnt1 = cans.createLinearGradient(10,0,390,0);
            gnt1.addColorStop(0,'red');//添加第一个颜色
            gnt1.addColorStop(0.5,'green');//添加第二个颜色
            gnt1.addColorStop(1,'blue');//添加第三个颜色
            cans.fillStyle = gnt1;
            //绘制一个矩形
            cans.fillRect(10,10,380,280);
    </script>
    </body>
</html>

在这里插入图片描述
绘制一个反射渐变

 var can = document.getElementById("can");
            var cans = can.getContext('2d');
            //创建一个放射渐变对象
           	var gnt = cans.createRadialGradient(250,250,0,250,250,250);
            gnt.addColorStop(0,'red');//添加第一个颜色
            gnt.addColorStop(0.5,'green');//添加第二个颜色
            gnt.addColorStop(1,'blue');//添加第三个颜色
            cans.fillStyle = gnt;
            //绘制一个矩形
            cans.fillRect(0,0,800,600);

在这里插入图片描述

通过渐变绘制一个带有立体感的圆球

 			 var can = document.getElementById("can");
            var cans = can.getContext('2d');
            //创建一个放射渐变对象
           	var gnt = cans.createRadialGradient(200,150,0,200,100,250);
            gnt.addColorStop(0,'red');//添加第一个颜色
            gnt.addColorStop(0.5,'#333');//添加第二个颜色

            cans.fillStyle = gnt;
            //绘制一个圆形
            cans.arc(200,150,100,0,Math.PI*2,true);
            cans.fill();

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值