HTML5中canvas线性渐变的用法

原创 2015年11月20日 11:43:39
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        function draw2D(){
            var canvas=document.getElementById("canvas-fram");
            if(canvas==undefined){
                return ;
            }
            canvas.width=1000;  //设置画布的宽
            canvas.height=1000; //设置画布的高
            var context=canvas.getContext("2d");
            var g1 = context.createLinearGradient(0, 0, 0, 300);//创建一个渐变对象,坐标开始为0,0,终点是0,300,说明渐变是从0,0到0,300的
            g1.addColorStop(0, 'rgb(255,0,0)');     //添加一个渐变颜色,设定的颜色离渐变结束点的偏移量(0~1)
            g1.addColorStop(0.5, 'rgb(0,255,0)');   //绿
            g1.addColorStop(1, 'rgb(0,0,255)');     //蓝
            context.fillStyle = g1;                 //gl在显存中已经生成了渐变对象,然后把该颜色填充到fillStyle中
            context.fillRect(0, 0, 300, 300);       //创建一个正方形
        }
    </script>
</head>
<body onload="draw2D()">
<canvas id="canvas-fram"></canvas>
</body>
</html>

运行效果图:


版权声明:本文为博主原创文章,未经博主允许不得转载。

html5 canvas 绘制矩形, 方法,线性渐变,径向渐变,透明等

canvas  绘制矩形, 方法,线性渐变,径向渐变,透明 1.    HTML5 canvas属性 1.1.     canvas画图 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制...
  • csdn_chenli
  • csdn_chenli
  • 2016年07月25日 15:55
  • 2096

HTML5画布Canvas坐标轴转换、图案填充、渐变与阴影

上一篇文章我们了解了一些canvas基本图形绘制  下面我们再来看一些相关操作 坐标轴变换 我们画布中默认的坐标轴与浏览器坐标轴相同  x正半轴朝右  y正半轴朝下  但是我们可以...
  • dx18520548758
  • dx18520548758
  • 2017年01月10日 17:32
  • 2429

html5中 让canvas所画的圆环具有 颜色渐变的效果

前几天遇到个问题,如何实现html5 canvas中圆环的颜色渐变?而此类例子,在百度上几乎没有这问题的实现,在此,跟大家分享下我的思路! 刚入手htnl5 ,知识点掌握不深,大家勿喷!贵在交流! 思...
  • h398085541
  • h398085541
  • 2014年12月21日 14:03
  • 4694

HTML5教程实例-用Canvas制作线性渐变图形

HTML5教程实例-用Canvas制作线性渐变图形 到目前为止,我们使用canvas绘制图形的基本知识已经介绍完毕,从本节开始,我们将介绍其他比较高级的绘制知识之一 - 线性渐变,首先我们来回顾一...
  • yixuan_1
  • yixuan_1
  • 2013年09月27日 12:03
  • 569

html5 canvas 绘制矩形, 方法,线性渐变,径向渐变,透明等

canvas  绘制矩形, 方法,线性渐变,径向渐变,透明 1.    HTML5 canvas属性 1.1.     canvas画图 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制...
  • csdn_chenli
  • csdn_chenli
  • 2016年07月25日 15:55
  • 2096

HTML5简明教程-1.1.4.HTML5Canvas参考手册 之 线性渐变 createLinearGradient

HTML5的canvas为我们提供了类似于CSS3中linear-gradient属性定义的渐变效果,用createLinearGradient()方法可以创建基于画布的线性渐变,创建好的线性渐变可以...
  • tomorrow13210073213
  • tomorrow13210073213
  • 2015年01月06日 08:40
  • 1885

HTML5画布Canvas坐标轴转换、图案填充、渐变与阴影

上一篇文章我们了解了一些canvas基本图形绘制  下面我们再来看一些相关操作 坐标轴变换 我们画布中默认的坐标轴与浏览器坐标轴相同  x正半轴朝右  y正半轴朝下  但是我们可以...
  • dx18520548758
  • dx18520548758
  • 2017年01月10日 17:32
  • 2429

HTML5 移动开发 -- Canvas 绘图 9.2 三角形路径绘制, 圆, 圆弧,二元三元抛物线, 渐变

三角形路径绘制                       // 2.获取canvas duix       var canvas = document.getEl...
  • menxu_work
  • menxu_work
  • 2013年06月17日 11:00
  • 3426

html5中 让canvas所画的圆环具有 颜色渐变的效果

前几天遇到个问题,如何实现html5 canvas中圆环的颜色渐变?而此类例子,在百度上几乎没有这问题的实现,在此,跟大家分享下我的思路! 刚入手htnl5 ,知识点掌握不深,大家勿喷!贵在交流! 思...
  • h398085541
  • h398085541
  • 2014年12月21日 14:03
  • 4694

HTML5 canvas图形绘制基础(矩形,线条,渐变色,圆形,图片,多边形)

div{     margin-left: 50;     position: relative;     float: left;     }                 ...
  • sinat_36917995
  • sinat_36917995
  • 2016年12月20日 21:31
  • 253
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5中canvas线性渐变的用法
举报原因:
原因补充:

(最多只允许输入30个字)