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>
效果如下:
截图无法显示出动态效果,建议复制后运行显示。