HTML5代码同样实现渐变,为什么不同的环境执行效果差别大
执行效果
图片1: 老师的环境执行结果
图片2:学生环境执行的效果
同样的代码,为什么在老师环境中执行的效果与在学生环境中执行的效果差别这么大?问题出在哪里呢?
代码源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制直线的相关方法和属性以及线性渐变|径向渐变</title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
#mycanvas{
border:1px solid #9c9898;
background-color:#77ffcc ;
}
</style>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("mycanvas");
// var context=canvas.getClientRects()("2d");
var context=canvas.getContext("2d");
//线性渐变
var clg=context.createLinearGradient(0,0,200,0);
clg.addColorStop(0,"#ff0000");
clg.addColorStop(0.5,"#00ff00");
clg.addColorStop(1,"#0000ff");
context.fillstyle=clg;
context.strokeStyle=clg;
context.fillRect(10,10,200,200);
//径向渐变
var crg=context.createRadialGradient(325,100,20,325,100,80);
crg.addColorStop(0,"#ffffff");
crg.addColorStop(0.75,"#ff0000");
crg.addColorStop(1,"#000000");
context.fillstyle=crg;
// context.strokeStyle=crg;
context.fillRect(230,10,200,200);
};
</script>
</head>
<body>
<canvas id="mycanvas" width="578" height="200"></canvas>
</body>
</html>