标签：
一个canvas是在html页面上规则的区域。
默认的，一个canvas没有边框和内容
<canvas id="myCanvas" width="200" height="100"></canvas>
基本步骤
<script> var canvas = document.getElementById("myCanvas");//发现canvas元素 var ctx = canvas.getContext("2d");//创建一个drawing对象 //在画布上画画 ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75); </script>
The HTML canvas 是一个二维空间的栅格
左上角的坐标是0,0
fillRect(0,0,150,75)：从（0,0）开始画一个150x75 pixels 的矩形
To actually draw the line, you must use one of the "ink" methods, like stroke().
j渐变可以用于填充形状线条等。
渐变对象需要设置两个亦或以上的颜色。使用addColorStop() 确定颜色的位置（0-1）和颜色。
将渐变赋值给属性fillstyle亦或strokeStyle，然后画出形状（规则几何，文本或线条）
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // Create gradient var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);
var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.font = "30px Comic Sans MS"; ctx.fillStyle = "red"; ctx.textAlign = "center"; ctx.fillText("Hello World", canvas.width/2, canvas.height/2);
<!DOCTYPE html> <html> <body> <p>Image to use:</p> <img id="scream" width="220" height="277" src="pic_the_scream.jpg" alt="The Scream"> <p>Canvas:</p> <canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> <script> window.onload = function() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var img = document.getElementById("scream"); ctx.drawImage(img, 10, 10); }; </script> </body> </html>
画一个动态时钟
<!DOCTYPE html> <html> <body> <canvas id="canvas" width="400" height="400" style="background-color:#333"> </canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var radius = canvas.height / 2;//设置半径为画布高度一半 ctx.translate(radius, radius); //将画布起点从左上角设置到画布中心，因为设置的画布宽度和高度一样，所以(radius,radius)等于(200,200) radius = radius * 0.90 //时钟最外面的圆的半径 setInterval(drawClock, 1000); //每隔一秒调用下面的函数 function drawClock() { drawFace(ctx, radius); //绘制表面 drawNumbers(ctx, radius); //绘制数字 drawTime(ctx, radius); //绘制指针 } function drawFace(ctx, radius) { var grad; ctx.beginPath(); //开始画线条 ctx.arc(0, 0, radius, 0, 2*Math.PI); //原型(0,0),半径radius，从0度到360度画一个圆圈 ctx.fillStyle = ‘white‘; //背景颜色白色 ctx.fill(); //填充 grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05); //放射型渐变 grad.addColorStop(0, ‘#333‘); grad.addColorStop(0.5, ‘white‘); grad.addColorStop(1, ‘#333‘); ctx.strokeStyle = grad;//线条样式 ctx.lineWidth = radius*0.1;//线条宽度 ctx.stroke();//填充线条 ctx.beginPath(); ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);//画表盘中间的圆点 ctx.fillStyle = ‘#333‘; ctx.fill(); } function drawNumbers(ctx, radius) { var ang; var num; ctx.font = radius*0.15 + "px arial"; ctx.textBaseline="middle"; ctx.textAlign="center"; for(num = 1; num < 13; num++){ //1-12 ang = num * Math.PI / 6; //以30度为一个划分 ctx.rotate(ang);//顺时针旋转画布度 ctx.translate(0, -radius*0.85);//在已经旋转的画布上设置中心为当前中心的垂直正上方 ctx.rotate(-ang);//逆时针旋转画布，以上三步目的是设置文字书写的中心点 ctx.fillText(num.toString(), 0, 0); ctx.rotate(ang); ctx.translate(0, radius*0.85); ctx.rotate(-ang); } } function drawTime(ctx, radius){ var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); //hour hour=hour%12; hour=(hour*Math.PI/6)+ (minute*Math.PI/(6*60))+ (second*Math.PI/(360*60)); drawHand(ctx, hour, radius*0.5, radius*0.07); //minute minute=(minute*Math.PI/30)+(second*Math.PI/(30*60)); drawHand(ctx, minute, radius*0.8, radius*0.07); // second second=(second*Math.PI/30); drawHand(ctx, second, radius*0.9, radius*0.02); } function drawHand(ctx, pos, length, width) { ctx.beginPath(); ctx.lineWidth = width; ctx.lineCap = "round"; ctx.moveTo(0,0); ctx.rotate(pos); ctx.lineTo(0, -length); ctx.stroke(); ctx.rotate(-pos); } </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/RachelChen/p/5436849.html
