image.png
image.png
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas2d</title>
</head>
<body>
<canvas id="can" height=500 width=500></canvas>
<script>
var canvas = document.getElementById('can');
var ctx = canvas.getContext('2d');
/* // 绘制线
ctx.moveTo(100,100);
ctx.lineTo(300,300);
ctx.lineTo(100,200);
ctx.stroke();*/
/*// 绘制圆
ctx.fillStyle = 'orange'
ctx.beginPath();
ctx.arc(200,200,100,0*Math.PI,2*Math.PI,true);
ctx.closePath();
ctx.fill();*/
// 绘制彩带
/* var grd = ctx.createLinearGradient(0,0,500,500); // 创建渐变效果
grd.addColorStop(0,'yellow');
grd.addColorStop(0.5,'pink');
grd.addColorStop(1,'orange')
ctx.fillStyle = grd
ctx.fillRect(0,0,500,500);*/
// 绘制一个空心字
/* ctx.font = '30px Arial';
ctx.fillText('谢',10,50); // 实体字
ctx.strokeText('海涛',10,200) // 空心字*/
</script>
</body>
</html>
网友评论