canvas绘图是HTML5新增的功能，配合js可以完成诸多绘制功能，如开发组件。
首先通过<canvas.../>定义一张画布，获取CanvasRendingContext2D对象，然后调用CanvasRendingContext2D的方法进行绘图。常用元素如下：
fillRect():填充一个矩形区域；
strokeRect：绘制一个矩形边框；
beginPath()/closePsth():开始和关闭定义的路径；
arc(double x,double y, double radius, double startAngle,endAngle,boolean counterlockwise ):添加一段圆弧,(x,y)为圆心，radius 为半径，startAngle,endAngle分别定义开始角度和结束角度，counterlockwise判断是否顺时针；
bezierCurveTo():定义一段贝济埃曲线；
clearRect():擦掉矩形区域绘制的图形；
fill():填充当前canvas路径；
fillText():填充字符串；
moveTo():吧当前路径移至此点；
lineTo():连接当前点到结束点的路径；
常用属性：
fillStyle:设置填充风格；
strokeStyle：设置绘制路径的填充风格；
lineJoin：设置线条连接点的风格；
lineWidth：设置线条宽度。
基本元素应用实例：
<html>
<head>
<title>绘图</title>
<meta charset="utf-8" />
</head>
<body>
<canvas id="mc" width="400" height="280" style="border:1px solid black"></canvas>
<script>
var canvas=document.getElementById("mc");
var ctx=canvas.getContext('2d');
ctx.fillStyle="#f00";
ctx.fillRect(30,20,120,60);
ctx.fillStyle="#ff0";
ctx.fillRect(80,60,120,60);
ctx.strokeStyle="#f00";
ctx.lineWidth=10;
ctx.strokeRect(30,130,120,60);
ctx.strokeStyle="#0ff";
ctx.lineJoin="round";
ctx.strokeRect(80,16,120,60);
ctx.strokeStyle="#f0f";
ctx.lineJoin="bevel";
ctx.strokeRect(130,190,120,60);
</script>
<body>
</html>显示效果：
点线模式示例：
<html>
<head>
<title>绘图1</title>
<meta charset="utf-8" />
</head>
<body>
<canvas id="mc" width="400" height="280" style="border:1px solid black"></canvas><br/>
选择点线模式：<select id="lineDash" onchange="changeLineDash(this.value);"></select><br/>
点线相位：<input type="range" id="lineDashOffset" style="width:300px" onchange="changeLineDashOffset(this.value);" />
<script>
var lineDashArr=[
[2,2],
[2.0,4.0,2.0],
[2.0,4.0,6.0],
[2.0,4.0,2.0,6.0],
[2.0,2.0,4.0,4.0],
[2.0,2.0,4.0,6.0,10.0]
];
var phaseMax=20;
var phaseMin=-20;
var lineDashEle=document.getElementById("lineDash");
for(var i=0;i<lineDashArr.length;i++){
lineDashEle.options[i]=new Option(lineDashArr[i],i);
}
lineDashEle.options[0].selected=true;
var lineDashOffsetEle=document.getElementById("lineDashOffset");
lineDashOffsetEle.max=phaseMax;
lineDashOffsetEle.min=phaseMin;
lineDashOffsetEle.step=0.1;
lineDashOffsetEle.value=0;
var lineDash=lineDashArr[0];
var lineDashOffset=0;
function draw(){
var canvas=document.getElementById("mc");
var ctx=canvas.getContext('2d');
ctx.fillStyle="#fff";
ctx.fillRect(0,0,400,280);
ctx.strokeStyle="#f0f";
ctx.lineWidth=2;
ctx.setLineDash(lineDash);
ctx.lineDashOffset=lineDashOffset;
ctx.strokeRect(40,60,120,120);
ctx.beginPath();
ctx.arc(300,120,60,0,Math.PI*2,true);
ctx.moveTo(30,30);
ctx.lineTo(360,30);
ctx.moveTo(200,50);
ctx.lineTo(200,240);
ctx.closePath();
ctx.stroke();
}
function changeLineDash(i){
lineDash=lineDashArr[i];
draw();
}
function changeLineDashOffset(val){
lineDashOffset=val;
draw();
}
draw();
</script>
<body>
</html>显示效果：
月亮从海上升起制作效果展示（海上生明月，天涯共此时）:
<html>
<head>
<title>绘图</title>
<meta charset="utf-8" />
</head>
<body style="margin:0;">
<div style="margin:0;">
<canvas id="mc" width="800" height="500" style="border:1px solid black;border-bottom-color:white;"></canvas>
<div>
<div style="margin:0;">
<canvas id="ac" width="800" height="200" style="border:1px solid black;border-top-color:white;"></canvas>
<div>
<script>
var radius=50;
var ySpeed=0.5;
var xSpeed=0.25;
var x=400;
var y=500;
var canvas=document.getElementById("mc");
canvas.width = canvas.parentNode.offsetWidth;
var ctx=canvas.getContext('2d');
ctx.fillStyle="yellow";
ctx.arc(x,y,50,0,Math.PI*2,true);
ctx.fill();
<!-- ********************** -->
<!-- ********************** -->
<!--月亮升起效果-->
function draw(){
ctx.fillStyle="#fff";
ctx.clearRect(200-radius,y-radius-ySpeed,x+radius,y+radius);
y-=ySpeed;
x-=xSpeed;
radius+=0.075;
ctx.fillStyle="yellow";
ctx.beginPath();
ctx.arc(x,y,radius,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
setInterval(draw,12);
<!--右侧文字显示效果-->
function myFont1(){
ctx.fillStyle="#EDD994";
ctx.font="italic 80px '隶书'";
ctx.fillText("海",800,130);
}
function myFont2(){
ctx.fillStyle="#EDD994";
ctx.font="italic 80px '隶书'";
ctx.fillText("上",900,130);
}
function myFont3(){
ctx.fillStyle="#EDD994";
ctx.font="italic 80px '隶书'";
ctx.fillText("升",1000,130);
}
function myFont4(){
ctx.fillStyle="#EDD994";
ctx.font="italic 80px '隶书'";
ctx.fillText("明",1100,130);
}
function myFont5(){
ctx.fillStyle="#EDD994";
ctx.font="italic 80px '隶书'";
ctx.fillText("月",1200,130);
}
function myFont6(){
ctx.fillStyle="#EDD994";
ctx.font="italic 80px '隶书'";
ctx.fillText("天",850,230);
}
function myFont7(){
ctx.fillStyle="#EDD994";
ctx.font="italic 80px '隶书'";
ctx.fillText("涯",950,230);
}
function myFont8(){
ctx.fillStyle="#EDD994";
ctx.font="italic 80px '隶书'";
ctx.fillText("共",1050,230);
}
function myFont9(){
ctx.fillStyle="#EDD994";
ctx.font="italic 80px '隶书'";
ctx.fillText("此",1150,230);
}
function myFont10(){
ctx.fillStyle="#EDD994";
ctx.font="italic 80px '隶书'";
ctx.fillText("时",1250,230);
}
setTimeout(myFont1,1500);
setTimeout(myFont2,2000);
setTimeout(myFont3,2500);
setTimeout(myFont4,3000);
setTimeout(myFont5,3500);
setTimeout(myFont6,4500);
setTimeout(myFont7,5000);
setTimeout(myFont8,5500);
setTimeout(myFont9,6000);
setTimeout(myFont10,6500);
<!--底部波浪效果-->
var canvas = document.getElementById('ac');
var ctc = canvas.getContext('2d');
canvas.width = canvas.parentNode.offsetWidth;
canvas.height = 200;
ctc.fillStyle = "rgba(0,222,255, 0.2)";
ctc.beginPath();
ctc.moveTo(0, canvas.height/2);
ctc.lineTo(canvas.width, canvas.height/2);
ctc.lineTo(canvas.width, canvas.height);
ctc.lineTo(0, canvas.height);
ctc.lineTo(0, canvas.height/2);
ctc.closePath();
ctc.fill();
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
var lines = ["rgba(0,222,255, 0.2)",
"rgba(157,192,249, 0.2)",
"rgba(0,168,255, 0.2)",
"rgba(10,168,220, 0.2)",
"rgba(0,168,220, 0.2)",
"rgba(0,128,250, 0.1)"
];
var step = 0;
function loop(){
ctc.clearRect(0,0,canvas.width,canvas.height);
step++;
for(var j = lines.length - 1; j >= 0; j--) {
ctc.fillStyle = lines[j];
var angle = (step+j*45)*Math.PI/180;
var deltaHeight = Math.sin(angle) * 90;
var deltaHeightRight = Math.cos(angle) * 90;
ctc.beginPath();
ctc.moveTo(0, canvas.height/2+deltaHeight);
ctc.bezierCurveTo(canvas.width /2, canvas.height/2+deltaHeight-50, canvas.width / 2,
canvas.height/2+deltaHeightRight-50, canvas.width, canvas.height/2+deltaHeightRight);
ctc.lineTo(canvas.width, canvas.height);
ctc.lineTo(0, canvas.height);
ctc.lineTo(0, canvas.height/2+deltaHeight);
ctc.closePath();
ctc.fill();
}
requestAnimFrame(loop);
}
loop();
</script>
<body>
</html>效果如下：
截图无法显示出动态效果，建议复制后运行显示。
1232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
