39,084
社区成员
发帖
与我相关
我的任务
分享html5 canvas-线性渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
background-color: #eeeeee;
}
#outer {
margin-left: 40px;
margin-top: 40px;
}
</style>
</head>
<body>
<div id="outer">
<canvas id="canvas1" width="400" height="400">
your browser doesn't support the canvas!try another browser.
</canvas>
</div>
<script type="text/javascript">
var mycanvas=Document.getElementById("canvas1");
var cntx=mycanvas.getContext('2d');
var mygradient=cntx.createLinearGradient(30,30,300,300);
mygradient.addColorStop("0","#CC3");
mygradient.addColorStop(".40","#FF0");
mygradient.addColorStop(".57","#390");
mygradient.addColorStop(".82","#90C");
mygradient.addColorStop("1.0","#9FF");
cntx.fillStyle=mygradient;
cntx.fillRect(0,0,400,400);
</script>
</body>
</html>
我在网页运行了，可是没有任何东西，画布块创建完成了的，但是没有任何颜色。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
background-color: #eeeeee;
}
#outer {
margin-left: 40px;
margin-top: 40px;
}
</style>
</head>
<body>
<div id="outer">
<canvas id="canvas1" width="400" height="400">
your browser doesn't support the canvas!try another browser.
</canvas>
</div>
<script type="text/javascript">
var mycanvas=Document.getElementById("canvas1");
var cntx=mycanvas.getContext('2d');
var mygradient=cntx.createLinearGradient(30,30,300,300);
mygradient.addColorStop("0","#CC3");
mygradient.addColorStop(".40","#FF0");
mygradient.addColorStop(".57","#390");
mygradient.addColorStop(".82","#90C");
mygradient.addColorStop("1.0","#9FF");
cntx.fillStyle=mygradient;
cntx.fillRect(0,0,400,400);
</script>
</body>
</html>
我在网页运行了，可是没有任何东西，画布块创建完成了的，但是没有任何颜色。
...全文
请发表友善的回复…
发表回复
wxg994861354 2016-10-27
- 打赏
- 举报
谢谢，大神，我会注意的了，尴尬...
当作看不见 2016-10-27
- 打赏
- 举报
问题有点小。。
var mycanvas=Document.getElementById("canvas1");
你的Document ,注意是大写的，改为document，ok了 。。。
var mycanvas=Document.getElementById("canvas1");
你的Document ,注意是大写的，改为document，ok了 。。。