canvas基础教学之线性渐变

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>color</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #canvas{
                background-color: #666666;
                /*opacity: 0.2;*/
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="600" height="300">Canvas not supported</canvas>
        <script type="text/javascript">
            var canvas=document.getElementById(‘canvas‘);
                context=canvas.getContext(‘2d‘);
            var    gradient=context.createLinearGradient(0,0,canvas.width,30);
            gradient.addColorStop(0,‘red‘);
            gradient.addColorStop(0.25,‘blue‘);
            gradient.addColorStop(0.5,‘black‘);
            gradient.addColorStop(0.75,‘yellow‘);
            gradient.addColorStop(1,‘green‘);
            context.fillStyle=gradient;
            context.fillRect(0,0,600,300);
        </script>
    </body>
</html>

实际效果

时间： 2024-11-29 11:31:33

canvas基础教学之线性渐变的相关文章

【一天一个canvas】绘制一个线性渐变的矩形（五）

渐变是填充的一种相当不错的效果,结合实例2和实例3,我们可以创建一个渐变的矩形 <!doctype html> <html> <head> <meta charset="UTF-8"> </head> <style type="text/css"> canvas{border:dashed 2px #CCC} </style> <script type="text/j

canvas基础教学之实现第一个矩形

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Learning the basics of canvas</title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 /*canvas的颜色默认和父集背景颜

canvas基础教学之矩形描边及注意事项

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Learning the basics of canvas</title> <style type="text/css"> *{ margin: 0; padding: 0; } /*canvas默认大小300*150个屏幕像素,用css设置canvas的width

fillStyle线性渐变

废话小说,沾待马 <!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas</title> <style type="text/css"> #canvas{border:1px solid #eee ; display:block; background-color: #B36666; margin: 20px auto; } &

HTML5 Canvas ( 线性渐变, 升级版的星空 ) createLinearGradient, addColorStop

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/jQuery.js"></script> <style type="text/css">

在canvas里面,除了使用纯色,我们还能把填充和笔触样式设置为渐变色:线性渐变和径向渐变. 线性渐变 createLinearGradient(x0,y0,x1,y1) 返回 CanvasGradient 四个参数分别是渐变色起始坐标x,起始坐标y,结束坐标x,结束坐标y. 渐变色沿着两点之间的一条线来进行渐变. 径向渐变 createRadialGradient(x0,y0,r0,x1,y1,r1) 返回CanvasGradient 六个参数分别是起点圆心坐标(x0,y0) 起点圆心半径

canvas基础知识

低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas.检测<canvas id="canvas" width="150" height="200" > 你的浏览器不支持canvas</canvas>var canvas = document.getElementById('canvas');if(canvas.getContext) alert('支持canvas'); >> 绘

Android线性渐变

布局实现: 1. 在res中建立drawable文件夹. 2. 在drawable文件夹中建立shape.xml. 3. shape.xml的代码如下: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"

如何给SVG填充和描边应用线性渐变

给SVG元素应用填充和描边有三种方法(戳这里学习SVG填充和描边的相关内容).你可以使用纯色.图案或渐变.前面两种方法我们之前已经讲过了,现在我们来讨论第三种方法——渐变. SVG提供了两种渐变——线性.径向.我今天先讲线性渐变,下篇我们再看看径向渐变. SVG线性渐变如果你看过这系列的SVG之前的文章,你应该对这里渐变的很多概念都比较熟悉啦.在<defs>中定义,然后在后面把它们作为填充或描边来引用. 我们使用<linearGradient>元素来定义线性渐变.我们从一个简单的