HTML5——Canvas_05之【绘制径向渐变】

最新推荐文章于 2023-10-19 15:51:43 发布
最新推荐文章于 2023-10-19 15:51:43 发布
阅读量389 收藏
点赞数
分类专栏： Html5 Canvas 文章标签： Canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/superstatus/article/details/80566104
版权
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >

< head >
< meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" >
< title >绘制径向渐变 </ title >
< script >
function draw( id){
var canvas= document. getElementById( id);
if( canvas== null)
{
return false;
}
var context= canvas. getContext( "2d");
//createRadiaGradient径向渐变
var g1= context. createRadiaGradient( 400, 0, 0, 400, 0, 400);
g1. addColorStop( 0.1, "rgb(255,255,0)");
g1. addColorStop( 0.3, "rgb(255,0,255)");
g1. addColorStop( 1, "rgb(0,255,255)");
content. fillStyle= g1;
context. fillRect( 0, 0, 500, 500);
context. closePath();
context. fill();
context. stroken();



}
</ script >
</ head >

< body onload= "draw(" canvas ");" >
< canvas id= "canvas" width= "500" height= "500" ></ canvas >
</ body >

</ html >
Superstatus
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5创建圆形渐变,HTML5 canvas createRadialGradient()放射状/圆形渐变
weixin_29069131的博客
06-16 1239
定义和用法createLinearGradient() 方法创建放射状/圆形渐变对象。渐变可用于填充矩形、圆形、线条、文本等等。提示：请使用addColorStop()方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。原理示意图JavaScript 语法：context.createRadialGradient(x0,y0,r0,x1,y1,r1);参数值参数描述x0渐变的开...
JavaScript+html5 canvas绘制渐变区域完整实例
10-22
主要介绍了JavaScript+html5 canvas绘制渐变区域的方法,结合完整实例形式分析了canvas颜色调用与图形绘制的相关技巧,需要的朋友可以参考下
canvas径向渐变详解
liudanyang_21的博客
08-14 809
创建径向渐变步骤如下： 1，创建径向渐变对象createRadialGradient(x0,y0,r0,x1,y1,r1)，其中x0,y0,r0分别为起始圆的位置坐标和半径，x1,y1,r1为终止圆的坐标和半径。 2，设置渐变颜色 addColorStop(position,color)，position为从0.0~1.0之间的值，表示渐变的相对位置；color是一个有效的css颜色值。 3，设置画笔颜色为该径向渐变对象。 4，画图。 例： var c = document.getElem..
canvas学习之渐变---createRadialGradient
昨天丶今天丶明天的的博客
08-14 6671
在canva0s画出的矩形, 圆形, 线条, 文本等的各种形状中，可以使用渐变来对各种形状的填充颜色进行一定程度上的颜色渐变效果，实现效果如下图所示 createRadialGradient(x,y,r,x1,y1,r1) - 创建(圆形)梯度渐变 addColorStop(index,color)方法指定颜色停止，参数使用index来描述，index范围在0-1之间，0.5即给定横纵...
Canvas系列绘制图片学习：绘制图片和渐变效果
最新发布
10-19 474
我们现在已经可以绘制好多东西了，不过在实际开发中，绘制最多的当然是图片了，这章我们就讲讲图片的绘制。绘制图片的API是，它的参数有三种情况： 来一个例子： 由上面可知，图片必须加载完成以后才可以绘制，所以我们放在里面了，当然也可以使用，如果我们的代码是在图片加载完后加载的就不会有什么问题。现在我们修改一下绘制的参数，如下： 我们试一下参数最多的这个，如下： 当然除了可以绘制图片以外，还可以绘制canvas： 当然除了可以绘制canvas以外还可以绘制video不过每次只能绘制一屏
学习Canvas基础-添加颜色、线性渐变和径向渐变
qq_67983277的博客
11-19 1678
学习Canvas基础-添加颜色、线性渐变和径向渐变
HTML5_Canvas_Cheat_Sheet.zip
07-02
HTML5_Canvas_Cheat_Sheet.zip
HTML5 canvas基本绘图之绘制阴影效果
09-28
<canvas></canvas>是HTML5中新增的标签，用于绘制图形，这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制阴影方法，感兴趣的小伙伴们可以参考一下
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
09-28
本文通过八种示例给大家分享了html5 canvas绘图，需要的朋友一起来学习吧
canvas_html5canvas_
10-03
html5 使用 canvas 拍照
H5 cancas绘制径向渐变
04-22
用H5canvas绘制径向渐变
使用canvas来完成线性渐变和径向渐变的功能的方法示例
01-21
fillStyle的第二种使用情况就是渐变色的填充。渐变色就分为线性渐变色和径向渐变色。 线性渐变:大致分为两步 这里又会使用到canvas的两个新的函数。 第一步 : 使用一个新的函数createLinearGradient( xstart，ystart,xend,yend );var linearGrad = context.createLinearGradient(xstart,ystart,xend,yend); 他有四个参数。分别为，xstart，ystart,xend,yend他们构成两个坐标，这两个坐标构成一个线段。这个线段实际上就是一个渐变线。渐变线用于定义渐变的方向和尺度。
HTML中canvas径向渐变的使用方法以及代码的编写
03-13
该资源是HTML中canvas径向渐变的使用方法以及代码的编写如果您需要的话可以进行下载,只为您能对canvas径向渐变有更加深入的了解.
Canvas使用渐变之-径向渐变详解
weixin_30648587的博客
06-24 128
创建径向渐变使用 createRadialGrdient(x0,y0,r0,x1,y1,r1)​ 一共​六个参数，分别代表： 起点的圆心坐标（第一个和第二个参数）， 起点园的半径（第三个参数）， 终点的圆心坐标（第四个和第五个参数）， 终点的圆心半径（第六个参数）​。 该方法返回CanvasGradient对象，该对象定义了addColorStop方法。 addColorStop(...
JS高级程序设计（18）
web
03-17 372
动画与Canvas图形 文章目录动画与Canvas图形一、使用requestAnimationFrame1.requestAnimationFrame2.cancelAnimationFrame二、基本的画布功能三、2D绘图上下文1.填充和描边2.绘制矩形3.绘制路径4.绘制文本5.变换6.绘制图像7.阴影8.渐变9.图案10.图像数据11.合成四、WebGL1.WebGL基础 一、使用requestAnimationFrame 1.requestAnimationFrame requestAnimati
canvas渐变-径向渐变
weixin_54057363的博客
03-09 313
canvas中使用createRadialGradient() 结合 addColorStop()方法实现径向渐变
canvas径向渐变
wu_xiao_qing的博客
04-09 322
文字排版      function  clearmap(){      context.clearRect(0,0,300,200);      } function draw(){ var c=document.getElementById("canvas"); var context = c.getContext("2d");    var
五子棋
NeQrhk
06-23 598
index.html 五子棋 var chessBoard = []; var chess = document.getElementById('chess'); var context = chess.getContext('2d'); //为了轮流下棋 var me=true; var over = false; //定义赢法的三维数
HTML5研究之canvas(二)
chen052210123的专栏
10-28 1838
(3)图像应用  Canvas 相当有趣的一项功能就是可以引入图像，它可以用于图片合成或者制作背景等。而目前仅可以在图像中加入文字（标准说明中并没有包含绘制文字的功能）。只要是 Gecko支持的图像（如 PNG，GIF，JPEG等）都可以引入到 canvas 中，而且其它的 canvas 元素也可以作为图像的来源。 绘制图像：drawImage(image, x, y) 当脚本执行后，图片开
html5怎么绘制径向渐变
06-12
在 HTML5 中，可以使用 Canvas API 绘制径向渐变。Canvas API 提供了 createRadialGradient() 方法来创建径向渐变对象。 createRadialGradient() 方法的语法如下： ``` context.createRadialGradient(x0, y0, r0, ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值