canvas-3radialGradient.html
2024-09-28 12:46:04
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" style="margin:0 auto;border:1px #ddd solid;">
The current browser does not support Canvas, can replace the browser a try!
</canvas> <script> window.onload = function(){
var canvas = document.getElementById('canvas'); canvas.width = 800;
canvas.height = 800; if(canvas.getContext('2d')){
var context = canvas.getContext('2d'); // begin
var radialGrad = context.createRadialGradient(400,400,0,400,400,500);
radialGrad.addColorStop(0.0,'white');
radialGrad.addColorStop(0.25,'yellow');
radialGrad.addColorStop(0.5,'green');
radialGrad.addColorStop(0.75,'blue');
radialGrad.addColorStop(1.0,'black');
context.fillStyle = radialGrad;
context.fillRect(0,0,800,800) }else{
alert('当前游览器不支持Canvas,请更换游览器后再试!');
}
}
</script>
</body>
<script>
/*总结
step 1
// 内圆的圆心(x0,y0) 内圆半径r0
var grd = context.creatRadialGradient(x0,y0,r0,x1,x1,r1)
step 2
//stop的值域[0,1]
grd.addColorStop(stop,color)
*/
</script>
</html>
最新文章
- node.js学习之路
- “不支持一个STA线程上针对多个句柄的WaitAll。”的解决方案
- Angular系列----AngularJS入门教程01:AngularJS模板 (转载)
- KMP算法浅析
- php和cookie
- yii2 windows 安装
- ajax请求原理
- Azure ARM (18) 将传统的ASM VM迁移到ARM VM (1)
- 18.CSS
- Gradle 1.12用户指南翻译——第二十二章. 标准的 Gradle 插件
- 如何使用Android Studio在安卓平台对Unity开发的应用进行性能检查?
- JQuery基本知识、选择器、事件、DOM操作、动画
- HTML float 和 absolute
- MySQL中的主键,外键有什么作用详解
- kafka---->;kafka stream的使用(一)
- Windebug调试
- stream classdesc serialVersionUID = -7218828885279815404, local class serialVersionUID = 1.
- async中await是干啥的,用不用有什么区别?
- [UE4]多播(广播)
- ios有些机型input和fixed导致的页面错位问题
热门文章
- UniDBGrid增加显示记录数的label及隐藏refresh按钮
- Java学习笔记43(打印流、IO流工具类简单介绍)
- springboot知识点补充(一)
- OpenGL ES: 纹理采样 texture sample
- Linux - 执行命令与脚本
- python tricks
- python买卖股票的最佳时机--贪心/蛮力算法简介
- python之有用的3个内置函数(filter/map/reduce)
- 基于httpclient的效率优化
- Linux内核源码分析之调度、内核线程模型 And Centos7.2&#39;s Kernel Resource Analysis