6.2.1_描边与填充绘制器
来源:互联网 发布:java redis选择数据库 编辑:程序博客网 时间:2024/06/03 20:26
6.2.1_描边与填充绘制器
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>描边与填充绘制器-使用精灵</title> <style> body{ background: #ddd; } #canvas{ background: #fff; cursor: pointer; margin: 10px; -webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.5); -moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.5); box-shadow: 3px 3px 6px rgba(0,0,0,0.5); } </style> </head> <body> <canvas id="canvas" width="600" height="600"></canvas> </body> <!-- 精灵对象 --> <script> var Sprite = function(name,painter,behaviors){ if(name !== undefined){ this.name = name; } if(painter !== undefined){ this.painter = painter; } this.top = 0; this.left = 0; this.width = 10; this.height = 10; this.velocityX = 0; this.velocityY = 0; this.visible = true; this.animating = false; this.behaviors = behaviors || []; } Sprite.prototype = { paint:function(context){ if(this.painter !== undefined && this.visible){ this.painter.paint(this,context); } }, update:function(context,time){ for(var i=0;i<this.behaviors.length;i++){ this.behaviors[i].execute(this,context,time); } } } </script> <!-- 享元模式:使用一个对象来表示多个概念,就是享元模式。 如本例只有一个实例的bll的精灵对象,但是确绘制了三个表针及表盘中心 --> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var clock_radius = canvas.width/2 - 15; var hour_hand_truncation = 35; var ballPainter = { paint:function(sprite,context){ var x = sprite.left+sprite.width/2; var y = sprite.top + sprite.height/2; var width = sprite.width; var height = sprite.height; var radius = sprite.width/2; context.save(); context.beginPath(); context.arc(x,y,radius,0,Math.PI*2,false); context.clip(); context.shadowColor = 'rgb(0,0,0)'; context.shadowOffsetX = -4; context.shadowOffsetY = -4; context.shadowBlur = 8; context.fillStyle ='rgba(218,165,32,0.1)'; context.fill(); context.lineWidth = 2; context.strokeStyle = 'rgb(100,100,195)'; context.stroke(); context.restore(); } } var ball = new Sprite('ball',ballPainter); //初始化 context.lineWidth = 0.5; context.strokeStyle = 'rgba(0,0,0,0.2)'; context.shadowColor = 'rgba(0,0,0,0.5)'; context.shadowOffsetX = 2; context.shadowOffsetY = 2; context.shadowBlur = 4; drawGrid('lightgray',10,10); window.requestAnimationFrame(animate); function animate(){ context.clearRect(0,0,canvas.width,canvas.height); drawGrid('lightgray',10,10); drawClock(); window.requestAnimationFrame(animate); } //绘制表 function drawClock(){ drawClockFace(); drawHands(); } //绘制表针们 function drawHands(){ var date = new Date(); var hour = date.getHours(); //秒针 ball.width = 20; ball.height =20; drawHand(date.getSeconds(),false); //分针 context.save(); context.lineWidth =1; ball.width = 30; ball.height = 30; drawHand(date.getMinutes(),false); context.restore(); //时针 context.save(); context.lineWidth =2; hour = hour>12? hour-12:hour; ball.width = 40; ball.height = 40; drawHand(hour*5 + (date.getMinutes()/60)*5,true); context.restore(); //表心 ball.width = 10; ball.height = 10; ball.left = canvas.width/2 - ball.width/2; ball.top = canvas.height/2 - ball.height/2; ballPainter.paint(ball,context); } //绘制表针 function drawHand(time,isHour){ var angle = (Math.PI*2)*time/60 - Math.PI/2; var handRudius = isHour? clock_radius - hour_hand_truncation:clock_radius; lineEnd = { //线与球的交汇处 x:canvas.width/2+Math.cos(angle)*(handRudius - ball.width/2), y:canvas.height/2+Math.sin(angle)*(handRudius - ball.width/2) }; context.beginPath(); context.moveTo(canvas.width/2,canvas.height/2); context.lineTo(lineEnd.x,lineEnd.y); context.stroke(); ball.left = canvas.width/2 + Math.cos(angle)*handRudius - ball.width/2; ball.top = canvas.height/2 +Math.sin(angle)*handRudius - ball.height/2; ball.paint(context); } //绘制表盘 function drawClockFace(){ context.beginPath(); context.arc(canvas.width/2,canvas.height/2,clock_radius,0,Math.PI*2,false); context.save(); context.strokeStyle = 'rgba(0,0,0,0.2)'; context.stroke(); context.restore(); } //网格线 function drawGrid(color, stepX, stepY) { context.save(); context.shadowColor = undefined; context.shadowOffsetX = 0; context.shadowOffsetY = 0; context.shadowBlur = 0; context.strokeStyle = color; context.lineWidth = 0.5; context.fillStyle = '#fff'; context.fillRect(0, 0, canvas.width, canvas.height); for(var i = stepX + 0.5; i < context.canvas.width; i += stepX) { context.beginPath(); context.moveTo(i, 0); context.lineTo(i, context.canvas.height); context.stroke(); } for(var i = stepY + 0.5; i < context.canvas.height; i += stepY) { context.beginPath(); context.moveTo(0, i); context.lineTo(context.canvas.width, i); context.stroke(); } context.restore(); } </script></html>
阅读全文
0 0
- 6.2.1_描边与填充绘制器
- 6.2.1_描边与填充绘制器
- 6.2.1_描边与填充绘制器
- 2.6_路径描边与填充
- 3.1_文本的描边与填充
- n[VB.NET源码]51_绘制填充图形
- HTML5绘图基础_10_绘制多个弧线_填充
- 6.2.2_图像绘制器
- 6.2.3_精灵表绘制器
- (zhuan)路径、描边与填充
- canvas路径,描边与填充
- OpenGL绘制填充五角星
- 绘制填充区域
- HTML5 Canvas 填充与描边(Fill And Stroke)
- 画弧线填充描边与使用中心
- canvas画矩形之清除,描边与填充
- canvas图像的描边与填充效果
- 精图规范1.0----11 绘制:填充、描边和标记符号 Painting: Filling, Stroking and Marker Symbols
- Android WiFi系统
- java中Calendar处理日期时的注意事项
- 6.1_精灵概述
- MobLink网页跳转app指定界面技术简介之 URL Scheme
- 【模板】Prim+堆优化 最小生成树
- 6.2.1_描边与填充绘制器
- 领域驱动设计之领域模型
- 简单Properties属性读取
- 6.2.1_描边与填充绘制器
- Spring:IOC—控制反转(2)
- hdu1249 三角形
- 反射机制的应用
- 6.2.1_描边与填充绘制器
- Git时间 版本控制工具 2017-05-27