<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#mycanvas{border: 1px solid blue;}
</style>
</head>
<body>
<canvas></canvas>
</body>
<script>
window.onload=function(){
canvas=document.getElementById("mycanvas");
context=mycanvas.getContext("2d");
var m=0;
setInterval(change,400);
function change(){
if(m>6){
m=0;
context.clearRect(0,0,130,130);
}
context.beginPath();
context.arc(0,0,20*m,0,0.5*Math.PI,false);
context.strokeStyle="blue";
context.stroke();
m++;
}
context.beginPath();
context.moveTo(150,150);
context.quadraticCurveTo(10,100,150,250);
context.strokeStyle="red"
context.stroke();
context.fillStyle="red";
context.fill();
context.beginPath();
context.moveTo(150,150);
context.quadraticCurveTo(300,100,150,250);
context.strokeStyle="red"
context.stroke();
context.font="25px 楷体"
context.fillText("这是我的文字",80,290);
context.strokeStyle="aqua";
context.font="40px 黑体"
context.strokeText("你好",160,100);
context.fillStyle="red";
context.fill();
}
</script>
</html>
新增了canvas画布效果: