Javascript 用线性渐变填充画布_Javascript_Canvas

Javascript 用线性渐变填充画布

javascript canvas

Javascript 用线性渐变填充画布,javascript,canvas,Javascript,Canvas,尝试编写一些代码，这些代码将执行以下操作用户将通过单击选择颜色，画布元素将填充该颜色作为渐变色以及固定的白色。代码似乎不起作用 <html> <head> <style> #chart{width:80px;height:80px;position:fixed;top:20px;left:20px;} #mycanvas{width:200px;height:150px;position:fixed;top:250px;left:200px;border:1

尝试编写一些代码，这些代码将执行以下操作

用户将通过单击选择颜色，画布元素将填充该颜色作为渐变色以及固定的白色。代码似乎不起作用

<html>
<head>
<style>
#chart{width:80px;height:80px;position:fixed;top:20px;left:20px;}
#mycanvas{width:200px;height:150px;position:fixed;top:250px;left:200px;border:1px solid black;}
</style>
</head>
<body>
<script>
function mygradient(colors){
     var canvas=document.getElementById('mycanvas');
     var ctx=canvas.getContext("2d");
     var grad=ctx.createLinearGradient(0,0,190,0);
     grad.addColorStop(0,colors);
grad.addColorStop(1,"white");
     ctx.fillStyle=grad;
     ctx.fillRect(0,0,200,0);
}
</script>
<table id="chart">
<tr>
<td bgColor="#FF8000" onClick="mygradient(this.bgColor);"></td>
<td bgColor="#FFBF00" onClick="mygradient(this.bgColor);"></td>
</tr>
</table>
<canvas id="mycanvas"style=""></canvas>
</body>
</html>


#图表{宽度：80px；高度：80px；位置：固定；顶部：20px；左侧：20px；}
#mycanvas{宽度：200px；高度：150px；位置：固定；顶部：250px；左侧：200px；边框：1px纯黑色；}
函数mygradient（颜色）{
var canvas=document.getElementById（'mycanvas'）；
var ctx=canvas.getContext（“2d”）；
var grad=ctx.createLinearGradient（0,0190,0）；
渐变添加颜色停止（0，颜色）；
渐变加色停止（1，“白色”）；
ctx.fillStyle=grad；
ctx.fillRect（0,0200,0）；
}

我对它做了一些工作，现在它可以工作了：

<html>
<head>
<style>
#chart{width:80px;height:80px;position:fixed;top:20px;left:20px;}
#mycanvas{width:200px;height:150px;position:fixed;top:250px;left:200px;border:1p    x solid black;}
</style>
</head>
<body>
<script>
function mygradient(colors){
 var canvas=document.getElementById('mycanvas');
 var ctx=canvas.getContext("2d");
 var grd=ctx.createLinearGradient(0,0,170,0);
 grd.addColorStop(0,colors);
 grd.addColorStop(1,"white");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
}
</script>
<table id="chart">
<tr>
<td bgColor="#FF8000" onClick="mygradient(this.bgColor);"></td>
<td bgColor="#FFBF00" onClick="mygradient(this.bgColor);"></td>
</tr>
</table>
<canvas id="mycanvas"style=""></canvas>
</body>


#图表{宽度：80px；高度：80px；位置：固定；顶部：20px；左侧：20px；}
#mycanvas{宽度：200px；高度：150px；位置：固定；顶部：250px；左侧：200px；边框：1p x纯黑；}
函数mygradient（颜色）{
var canvas=document.getElementById（'mycanvas'）；
var ctx=canvas.getContext（“2d”）；
var grd=ctx.createLinearGradient（0,0170,0）；
grd.addColorStop（0，颜色）；
grd.addColorStop（1，“白色”）；
ctx.fillStyle=grd；
ctx.fillRect（20,20150100）；
}

jsFIDLE:

看起来你真是太棒了比我强，我用了jQuery——所以我可能会因为包含了一个你没有要求的库而被扣分

但严肃地说，不要使用bgColor，它已被弃用

这是我所拥有的--

JS:

HTML:

如果您能提到我在代码中犯的错误，那就太好了？？0的高度不会显示任何内容：ctx.fillRect（0,0200,0）；它应该是ctx.fillRect（0,020150）；

var $swatch = $(".swatch");
$swatch.click(function (e) {

    color = $(this).css("background-color");
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.rect(0, 0, canvas.width, canvas.height);
    var grd = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
    grd.addColorStop(0, color);
    grd.addColorStop(1, '#fff');
    ctx.fillStyle = grd;
    ctx.fill();

});

  <table id="chart">
    <tr>
      <td class="swatch orange"></td>
      <td class="swatch yellow"></td>
    </tr>
  </table>
  <canvas id="myCanvas"></canvas>

#chart {
    width:80px;
    height:80px;
    position:fixed;
    top:20px;
    left:20px;
}
.yellow {
    background-color: #FFBF00;
}
.orange {
    background-color: #FF8000;
}
#myCanvas {
    width:200px;
    height:150px;
    position:fixed;
    top:250px;
    left:200px;
    border:1px solid black;
}