JavaScript入门之Canvas(一): 2D Context(3)_H5之家 - 中国HTML5教程资源分享第一站

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>canvas测试</title> 6 </head> 7 <body> 8 9 <canvas> 10 您的浏览器不支持 HTML5 canvas 标签。 11 </canvas> 12 13 <script> drawing=document.getElementById("myCanvas"); 17 var context=drawing.getContext("2d"); context.strokeStyle = "#ff0000"; 21 context.fillStyle = "rgba(0,0,0,0.3)"; context.strokeRect(10, 10, 50, 50); 25 context.fillRect(10, 10, 50, 50); context.strokeRect(35, 35, 50, 50); 29 context.fillRect(35, 35, 50, 50); context.clearRect(60,60, 25, 25); context.shadowOffsetX = -5; 36 context.shadowOffsetY = 5; 37 context.shadowBlur = 4; 38 context.shadowColor = "rgba(0, 0, 0, 0.8)"; context.beginPath(); 42 context.moveTo(85,35); 43 context.lineTo(120,75); 44 context.arc(85,35,25,0,2*Math.PI,false) 45 context.closePath(); 46 context.stroke(); gradient = context.createLinearGradient(140, 30, 190, 90); 50 gradient.addColorStop(0, "white"); 51 gradient.addColorStop(1, "black"); context.fillStyle = gradient; 55 context.fillRect(140, 30, 50, 50); 56 57 context.shadowColor = "rgba(0, 0, 0, 0)"; context.fillStyle = "rgba(0,0,0,1)"; 61 context.font = "bold 14px Arial"; 62 context.textAlign = "center"; 63 context.textBaseline = "middle"; 64 context.fillText("嘻哈", 110, 100); context.textAlign = "start"; 68 context.fillText("嘻哈", 110, 120); context.textAlign = "end"; 71 context.fillText("嘻哈", 110, 140); </script> 75 76 </body> 77 </html>

标签：lock 基线处理信息 rgb 距离 ont ext 9.png

原文：