你的位置:首页 > Java教程

[Java教程][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>