<!doctype <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>tt</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
function draw(){
var c = document.getElementById('c');
var ctx = c.getContext('2d');
ctx.fillStyle="rgb(200,0,0)"
ctx.fillRect(100,100,150,150);
ctx.fillStyle="rgba(0,0,200,0.5)";
ctx.fillRect(150,150,200,200);
}
function getCtx(){
var c = document.getElementById('c');
var ctx = c.getContext('2d');
return ctx;
}
function drawPath(){
var ctx = getCtx();
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(50,100);
ctx.lineTo(100,100);
ctx.stroke();
}
function drawFace(){
var c = getCtx();
c.beginPath();
c.arc(75,75,50,0,Math.PI*2,true);
c.moveTo(110,75);
c.arc(75,75,35,0,Math.PI);
c.stroke();
}
function drawSVGPath(){
var c= getCtx();
c.strokeStyle="#ff0000";
var p = new Path2D("M10 10 h 80 v 80 h -80 Z");
c.stroke(p);
}
function drawText(){
var c = getCtx();
c.font = "50px serif";
c.fillStyle = "#00FF00";
c.strokeText("你好",100,100);
}
</script>
</head>
<body onload="drawText()">
<canvas id="c" width="500" height="500" />
</body>
</html>