使用javascript和canvas画月半弯
2014-01-26 00:02
295 查看
使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5
查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm
以下是代码:
web前端:/article/4797642.html
查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm
以下是代码:
<!doctype html> <html> <head> <title>使用javascript和canvas画月半弯-柯乐义</title> <style> canvas{display: block;border:1px dotted skyblue;} </style> </head> <body> <h1>使用javascript和canvas画月半弯·柯乐义</h1> <canvas id="canvas-keleyi-com" width="500" height="400"></canvas> <script> var nimo = {}; window.onload = function () { nimo.canvas = document.getElementById('canvas-ke'+'leyi-com'); nimo.context = nimo.canvas.getContext('2d'); nimo.starBgImg = new Image(); nimo.starBgImg.src = 'http://keleyi.com/keleyi/phtml/html5/22/star-bg.jpg'; nimo.starBgImg.onload = function () { //填充星星背景 nimo.statBg = nimo.context.createPattern(nimo.starBgImg, 'repeat') nimo.context.rect(0, 0, nimo.canvas.width, nimo.canvas.height); nimo.context.fillStyle = nimo.statBg; nimo.context.fill(); //绘制月亮轮廓 nimo.context.beginPath(); nimo.context.arc(200, 200, 100, 0.6 * Math.PI, 1.3 * Math.PI); nimo.context.bezierCurveTo(140, 119, 93, 224, 169, 295) //填充月亮轮廓和设置投影 nimo.context.shadowColor = "blue"; nimo.context.shadowBlur = 3; nimo.context.strokeStyle = "blue"; nimo.context.stroke(); //填充放射渐变给月亮 nimo.radialGradient = nimo.context.createRadialGradient(150, 200, 0, 150, 200, 50); nimo.radialGradient.addColorStop(0, 'white') nimo.radialGradient.addColorStop(1, '#999') nimo.context.fillStyle = nimo.radialGradient; nimo.context.fill() //绘制月亮的研究和嘴巴 nimo.context.shadowColor = "white"; nimo.context.beginPath(); nimo.context.moveTo(110, 173); nimo.context.lineTo(114, 173); nimo.context.moveTo(119, 173); nimo.context.lineTo(123, 173); nimo.context.stroke(); nimo.context.beginPath(); nimo.context.arc(116, 183, 2, 0, 2 * Math.PI); nimo.context.stroke(); nimo.context.shadowColor = 'transparent'; nimo.context.font = "15px 微软雅黑" nimo.context.fillText('您好,我是月亮,祝您的美梦像星星一样永恒!', 100, 100)//设置文字及在图片上的位置 } } </script> </body> </html>
web前端:/article/4797642.html
相关文章推荐
- Jquery使用手册4--javascript处理 作者:choy
- javascript网页富文本编辑器:kindedit富文本编辑器插件的使用
- 使用javascript实现邮件发送按钮60秒倒计
- 在JavaScript中使用AOP
- 使用JavaScript修改浏览器URL地址栏的实现代码
- (转)使用JavaScript和DOM动态创建表格
- Javascript的调试利器:Firebug使用详解
- JavaScript中的函数嵌套使用
- 使用JavaScript编程分析多级嵌套JSON文档数据
- JSON进阶第一篇 在PHP与javascript 中使用JSON
- (转载)使用JavaScript操作表单
- JavaScript中Cookies的相关使用教程
- 使用JavaScriptCore在JS和OC间通信
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
- 如何使用JavaScript
- 使用 Flow 写更好的 JavaScript 代码
- 起步X5 UI模型使用的新的JAVASCRIPT UI库 DHTMLX (简称DHX)
- 使用javascript创建二维数组碰到的一些问题
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
- 使用JavaScript 和 Ajax 处理异步请求