[Javascript] Gradient Fills on the HTML5 Canvas
2023-09-14 09:00:55 时间
window.onload = function() { var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"); var gradient =context.createLinearGradient(100,100,100,200); gradient.addColorStop(1,"blue"); // show blue at the bottom gradient.addColorStop(0,"yellow"); // show yellow on the top context.fillStyle=gradient; context.fillRect(100,100,100,100); };
window.onload = function() { var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"); var gradient =context.createLinearGradient(100,100,100,200); gradient.addColorStop(1,"blue"); // show blue at the bottom gradient.addColorStop(0.75, "pink"); //close to the bottom gradient.addColorStop(0,"yellow"); // show yellow on the top context.fillStyle=gradient; context.fillRect(100,100,100,100); };
window.onload = function() { var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"); var gradient =context.createLinearGradient(100,100,200,100); gradient.addColorStop(1,"blue"); // show blue at the bottom gradient.addColorStop(0.75, "pink"); //close to the bottom gradient.addColorStop(0,"yellow"); // show yellow on the top context.fillStyle=gradient; context.fillRect(100,100,100,100); };
----------------------------
window.onload = function() { var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"); var gradient = context.createRadialGradient(100,100,0,100,100,50); gradient.addColorStop(0, "white"); gradient.addColorStop(1, "black"); context.fillStyle = gradient; context.beginPath(); context.arc(100,100,50,0,Math.PI * 2); context.closePath(); context.fill(); };
var gradient = context.createRadialGradient(100,100,20,100,100,50);
var gradient = context.createRadialGradient(100,100,20,100,100,80);
var gradient = context.createRadialGradient(100,100,20,100,100,30);
var gradient = context.createRadialGradient(120,80,0,110,90,60);
相关文章
- JavaScript如何判断是否为数字?
- HTML5期末大作业:大学生个人网站设计——我们的班级(7页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html网页制作代码大全 html5网页设计作业代码
- javascript html转换成markdown,如何使用Turndown使用JavaScript将HTML转换为Markdown[通俗易懂]
- 上手JavaScript基准测试
- Prism:轻量级的 Javascript 代码高亮库
- ORA-54036: cannot define referential constraint with ON DELETE SET NULL clause on virtual column ORACLE 报错 故障修复 远程处理
- base64编码加密解密的JavaScript实现详解编程语言
- JavaScript学习总结(五)——Javascript中==和===的区别详解编程语言
- 解决Eclipse报errors running builder ‘javascript validator’ on project详解编程语言
- MySQL连接查询:活学活用ON条件(mysql连接查询on)
- deleteMySQL中的ON DELETE: 数据安全策略分析(mysql中on)
- 深入理解MySQL中的ON用法(mysql 中on用法)
- MySQL中使用ON子句进行精准查询(mysql中on子句查询)
- delete cascadeOracle 中 ON DELETE CASCADE 的使用(oracle中的on)
- Oracle中ON关键字的精彩运用(oracle中on的使用)
- Oracle数据库中ON关键字的使用方法(oracle中on怎么用)
- 在JavaScript中使用inline函数的问题
- 用javascript实现图片马赛克后显示并切换
- Javascript模拟scroll滚动效果脚本
- 细品javascript寻址,闭包,对象模型和相关问题
- JavaScript验证浏览器是否支持javascript的方法小结
- JavaScript拖拽效果示例网页解决快速拖拽的问题
- JavaScript之IE的fireEvent方法详细解析
- JavaScript变量声明详解
- Javascript前端UI框架Kit使用指南之Kitjs简介
- JavaScript和CSS交互的方法汇总
- javascript实现类似超链接的效果
- Javascript基础教程之JavaScript语法