canvas线性渐变

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字排版</title>
<script type="text/javascript">
     function  clearmap(){
     context.clearRect(0,0,300,200);
     }
</script>
</head>
<body>


<canvas id="canvas" width="700" height="300" style="border:1px solid"></canvas>
</body>
<script type="text/javascript">
function draw(){
var c=document.getElementById("canvas");
var context = c.getContext("2d");
   var lingrad = context.createLinearGradient(0,0,0,200);
   lingrad.addColorStop(0,'#ff0000');
   lingrad.addColorStop(1/7,'#ff9900');
   lingrad.addColorStop(2/7,'#ffff00');
   lingrad.addColorStop(3/7,'#00ff00');
   context.fillStyle=lingrad;
   context.strokeStyle=lingrad;
   context.fillRect(10,10,200,200);


}
window.οnlοad=function(){
draw();
}




</script>
<input name="" type="button" value="清空画布" οnclick="clearmap();">
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5线性渐变方向可以通过指定起始点和结束点的坐标来控制,示例代码如下: ```html <canvas id="myCanvas" width="200" height="200"></canvas> ``` ```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // 创建线性渐变对象 var linearGradient = ctx.createLinearGradient(0, 0, 200, 0); // 添加渐变颜色 linearGradient.addColorStop(0, 'red'); linearGradient.addColorStop(0.5, 'green'); linearGradient.addColorStop(1, 'blue'); // 应用渐变 ctx.fillStyle = linearGradient; ctx.fillRect(0, 0, 200, 200); ``` 而使用canvas来完成线性渐变和径向渐变的功能,则可以使用`createLinearGradient()`和`createRadialGradient()`方法创建渐变对象,并使用`addColorStop()`添加渐变颜色,最后使用`fillStyle`属性将渐变应用到图形上,示例代码如下: ```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // 创建线性渐变对象 var linearGradient = ctx.createLinearGradient(0, 0, 200, 0); linearGradient.addColorStop(0, 'red'); linearGradient.addColorStop(0.5, 'green'); linearGradient.addColorStop(1, 'blue'); // 应用线性渐变 ctx.fillStyle = linearGradient; ctx.fillRect(0, 0, 200, 200); // 创建径向渐变对象 var radialGradient = ctx.createRadialGradient(100, 100, 50, 100, 100, 100); radialGradient.addColorStop(0, 'yellow'); radialGradient.addColorStop(1, 'orange'); // 应用径向渐变 ctx.fillStyle = radialGradient; ctx.beginPath(); ctx.arc(100, 100, 100, 0, 2 * Math.PI); ctx.fill(); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值