HTML canvas createLinearGradient() 方法

最新推荐文章于 2023-08-02 10:11:33 发布

zhanglir333

最新推荐文章于 2023-08-02 10:11:33 发布

阅读量448

点赞数

分类专栏： canvas 文章标签：渐变 canvas createLinearGradient

canvas 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文参考菜鸟教程网做的整理笔记

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML5 之颜色渐变(runoob.com)</title> 
</head>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<br/>
<canvas id="myCanvas1" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>

var c=document.getElementById("myCanvas");
/*getContext() 方法可返回一个对象，
该对象提供了用于在画布上绘图的方法和属性*/
var ctx=c.getContext("2d");

// Create gradient
/*渐变从(0,0)到(180,0)即横向渐变，横坐标0处是红色
横坐标180处是黄色，由红色向黄色过渡。*/
var grd=ctx.createLinearGradient(0,0,180,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"yellow");

// Fill with gradient
ctx.fillStyle=grd;//定义填充方式：渐变
ctx.fillRect(10,10,100,100);//设置填充范围
var c1=document.getElementById("myCanvas1");
var ctx1=c1.getContext("2d");


// Create gradient
/*渐变从(0,0)到(180,0)即横向渐变，横坐标0处是红色
横坐标180处是黄色，由红色向黄色过渡。*/
var grd1=ctx1.createLinearGradient(0,0,180,0);
grd1.addColorStop(0,"red");
grd1.addColorStop(1,"yellow");

// Fill with gradient
ctx1.fillStyle=grd1;//定义填充方式：渐变
ctx1.fillRect(10,10,180,100);//设置填充范围


</script>

</body>
</html>
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

这里写图片描述

createLinearGradient(0,0,180,0);渐变从(0,0)到(180,0)即横向渐变，横坐标0处是红色横坐标180处是黄色，由红色向黄色过渡。
但是，第一个fillRect(10,10,100,100)设置填充范围100X100，
第二个fillRect(10,10,180,100)设置填充范围180X100，比较两者的区别，其实是就像第一个从第二个处的横坐标0-100处截取的。

转自：http://blog.csdn.net/night_emperor/article/details/73521934

zhanglir333

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML canvas createLinearGradient() 方法

本文参考菜鸟教程网做的整理笔记html>head> meta charset="utf-8"> title>HTML5 之颜色渐变(runoob.com)title> head>body>canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5
复制链接

扫一扫