/*
* @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>
时间： 2024-11-03 20:50:05