/* * @Author: ocean * @Date: 2015-04-26 20:08:19 * @Last Modified by: ocean * @Last Modified time: 2015-04-26 20:30:08 */ 'use strict'; var canvastools = { /**********************************圆角矩形************************************************/ drawRoundRect : function (cxt, x, y, width, height, radius){ cxt.save(); cxt.translate(x, y); canvastools.pathRoundRect(cxt, width, height,radius); cxt.strokeStyle = "block"; cxt.stroke(); cxt.restore(); }, // 圆角填充矩形 fillRoundRect : function (cxt, x, y, width, height, radius, /*optional*/fillColor){ if(2*radius > width || 2*radius > height){ return; } cxt.save(); cxt.translate(x, y); canvastools.pathRoundRect(cxt, width, height,radius); cxt.fillStyle = fillColor || "black"; cxt.fill(); cxt.restore(); }, // 圆角描边矩形 strokeRoundRect : function (cxt, x, y, width, height, radius, /*optional*/lineWidth, /*optional*/strokeColor){ if(2*radius > width || 2*radius > height){ return; } cxt.save(); cxt.translate(x, y); canvastools.pathRoundRect(cxt, width, height,radius); cxt.lineWidth = lineWidth || 1; cxt.strokeColor = strokeColor || "black"; cxt.stroke(); cxt.restore(); }, // 圆角矩形路径 pathRoundRect : function (cxt, width, height, radius){ cxt.beginPath(); cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2); cxt.lineTo(radius, height); cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI); cxt.lineTo(0, radius); cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2); cxt.lineTo(width - radius, 0); cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2); cxt.closePath(); }, /**********************************绘制五角星************************************************/ drawStar : function (cxt, x, y, R, rot){ cxt.save(); cxt.translate(x, y); cxt.rotate(rot/180 * Math.PI); cxt.scale(R, R); canvastools.starPath(cxt); cxt.fillStyle = "#fb3"; // cxt.strokeStyle = "#fd5"; // cxt.lineWidth = 3; // cxt.lineJoin = "round"; cxt.fill(); // cxt.stroke(); //绘制出在（x, y）, 大小位R,旋转rot度的五角星 //…… cxt.restore(); }, // 星星路径 starPath : function (cxt){ cxt.beginPath(); for(var i = 0; i < 5; i++){ cxt.lineTo(Math.cos((18 + i * 72)/180 * Math.PI), -Math.sin((18 + i * 72)/180 * Math.PI)); cxt.lineTo(Math.cos((54 + i * 72)/180 * Math.PI) * 0.5, -Math.sin((54 + i * 72)/180 * Math.PI) * 0.5); } cxt.closePath(); } }
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> canvas{ border: 1px solid #ccc; } </style> <script type="text/javascript" src="js/custom.js"></script> </head> <body> <canvas id="container"></canvas> <script type="text/javascript"> window.onload = function(){ var canvas = document.querySelector('#container'); canvas.width = 1200; canvas.height = 800; var context = canvas.getContext('2d'); // 使用context绘制 // var skyStyle = context.createLinearGradient(0, 0, 0, canvas.height); var skyStyle = context.createRadialGradient(600, 800, 600, 600, 400, 0) skyStyle.addColorStop(0.0, 'black'); skyStyle.addColorStop(1.0, '#035'); context.fillStyle = skyStyle; context.fillRect(0, 0, canvas.width, canvas.height); for(var i = 0; i < 200; i++){ var r = Math.random() * 5 + 5; var x = Math.random() * canvas.width; var y = Math.random() * canvas.height * 0.65; var a = Math.random() * 360; // drawStar(context, x, y, r, r/2.0, a); canvastools.drawStar(context, x, y, r, a); } } // function drawStar(cxt, x, y, outerR, innerR, rot){ // cxt.beginPath(); // for(var i = 0; i < 5; i++){ // cxt.lineTo(Math.cos((18 + i * 72 - rot)/180 * Math.PI) * outerR + x, // -Math.sin((18 + i * 72 - rot)/180 * Math.PI) * outerR + y); // cxt.lineTo(Math.cos((54 + i * 72 - rot)/180 * Math.PI) * innerR + x, // -Math.sin((54 + i * 72 - rot)/180 * Math.PI) * innerR + y); // } // cxt.closePath(); // cxt.fillStyle = "#fb3"; // cxt.strokeStyle = "#fd5"; // cxt.lineWidth = 3; // cxt.lineJoin = "round"; // cxt.fill(); // cxt.stroke(); // } // function drawStar(cxt, x, y, R, rot){ // cxt.save(); // cxt.translate(x, y); // cxt.rotate(rot/180 * Math.PI); // cxt.scale(R, R); // starPath(cxt); // cxt.fillStyle = "#fb3"; // // cxt.strokeStyle = "#fd5"; // // cxt.lineWidth = 3; // // cxt.lineJoin = "round"; // cxt.fill(); // // cxt.stroke(); // //绘制出在（x, y）, 大小位R,旋转rot度的五角星 // //…… // cxt.restore(); // } // function starPath(cxt){ // cxt.beginPath(); // for(var i = 0; i < 5; i++){ // cxt.lineTo(Math.cos((18 + i * 72)/180 * Math.PI), // -Math.sin((18 + i * 72)/180 * Math.PI)); // cxt.lineTo(Math.cos((54 + i * 72)/180 * Math.PI) * 0.5, // -Math.sin((54 + i * 72)/180 * Math.PI) * 0.5); // } // cxt.closePath(); // } </script> </body> </html>