主题: 3024-nightambiance-mobileambiancebase16-darkblackboardcobalteclipseerlang-darklesser-darkmbomdn-likemidnightmonokaineatneonightparaiso-darkpastel-on-darkrubybluesolarizedthe-matrixtomorrow-night-eightiesvibrant-ink 新窗口 视图: 左侧面板 HTML CSS JS 预览 F11(全屏显示选中的编辑器) 查看更多帮助信息

相关文章:

HTML5 CanvasGradient对象用法详解

代码类型:

默认(HTML/CSS/JS) HTML混合(单页) PHP Java C# C++ C SQL

杂项:

• 启用CSS/JS语法检查
• 监测脚本运行错误
• 禁止库文件重复

文档类型:

HTML5 HTML 4.01 Strict HTML 4.01 Transitional HTML 4.01 Frameset XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset 无

JS库文件:

无 jQuery 1.11.1jQuery 2.1.1jQuery 1.10.2jQuery 1.9.1jQuery 1.8.3jQuery 1.7.2jQuery 1.6.4jQuery 1.5.2jQuery 1.4.4jQuery 1.3.2jQuery 1.2.6

手动添加:

<!-- 添加canvas标签，并加上红色边框以便于在页面上查看 --> <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;"> 您的浏览器不支持canvas标签。 </canvas>

//获取Canvas对象(画布) var canvas = document.getElementById("myCanvas"); //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误 if(canvas.getContext){ //获取对应的CanvasRenderingContext2D对象(画笔) var ctx = canvas.getContext("2d"); //绘制一个以坐标点(100,100)为圆心、半径为50px的圆形 ctx.arc(100, 100, 50, 0, Math.PI * 2, false); //创建一个表示放射性颜色渐变的CanvasGradient对象 //该对象的作用域是以(100,100)为圆心、半径为10px的内圆和以(100,100)为圆心、半径为50px的外圆之间的环状区域 var canvasGradient = ctx.createRadialGradient(100, 100, 10, 100, 100, 50); //在offset为0的位置(即内圆的圆圈处)添加一个蓝色的渐变 canvasGradient.addColorStop(0, "blue"); //在offset为0.5的位置(环状区域从内到外放射50%的中间位置)添加一个绿色的渐变 canvasGradient.addColorStop(0.5, "green"); //在offset为0的位置(即外圆的圆圈处)添加一个红色的渐变 canvasGradient.addColorStop(1, "red"); //将fillStyle的属性值设为该CanvasGradient对象 ctx.fillStyle = canvasGradient; ctx.fill(); }