[HTML5] Canvas绘制简单形状详解编程语言

使用canvas来进行绘画，它像很多其他dom对象一样，有很多属性和方法，操作这些方法，实现绘画

获取canvas对象，调用document.getElementById()方法

调用canvas对象的getContext()方法，获取context对象，参数：String的”2d”

绘制线段

调用context对象的moveTo()方法，把起点位置定义好，参数：x，y

调用context对象的lineTo()方法，把终点位置定义好，参数：x，y

调用context对象的stroke()方法，画一条线

如果不调用moveTo()方法，起点的位置是上次的点

绘制矩形

调用context对象的fillRect()方法，填充矩形，参数：起点横坐标，起点纵坐标，宽度，高度

调用context对象strokeRect()方法，边框矩形，参数：起点横坐标，起点纵坐标，宽度，高度

例如：context.fillRect(0,0,100,100); 会画出一个黑色的矩形

注意：html5 canvas fillRect坐标和大小一直不对，是因为canvas的宽度和高度必须内联在canvas标签中才对

绘制扇形

调用context对象的beginPath()方法，开启路径

调用context对象的moveTo()方法，把路径移动到圆心位置，参数：x，y

调用context对象的arc()方法，绘制圆弧，参数：圆心x坐标，圆心y坐标，开始角度，结束角度

调用context对象的closePath()方法，关闭路径

调用context对象的fill()方法，填充颜色

绘制贝塞尔曲线

调用context对象的bezierCurveTo()方法，绘制曲线路径，

参数：第一控制点x，第一控制点y，

第二控制点x，第二控制点y，

最终控制点x，最终控制点y

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>测试canvas</title> 
</head> 
<body> 
<canvas id="myCanvas" width="500px" height="1000px"></canvas> 
<script> 
var canvas=document.getElementById('myCanvas'); 
var context=canvas.getContext("2d"); 
//绘制矩形 
    context.fillRect(0,0,100,100); 
context.strokeRect(120,0,100,100); 
//绘制扇形 
    context.beginPath(); 
context.moveTo(50,220); 
context.arc(50,220,50,0,Math.PI/4); 
    context.closePath(); 
context.fill(); 
//绘制线段 
    context.moveTo(0,300); 
context.lineTo(100,300); 
context.lineTo(100,400); 
context.stroke(); 
//绘制贝塞尔曲线 
    context.moveTo(200,300); 
context.bezierCurveTo(200,300,250,300,300,400); 
context.stroke(); 
</script> 
</body> 
</html>

原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/12727.html

[HTML5] Canvas绘制简单形状详解编程语言

相关推荐

发表回复