html5的canvas知识总结(2)

xiaoxiao2021-03-01  17

1. rect()方法:画矩形

rect(x, y, w, h):矩形左上角的点为起点(x, y),w,h是矩形的宽高;

                           

效果:

        

问:矩形的最后的画笔在哪里?

 答:还在(x, y)起始位置。

rect方法结合stroke和fill方法,也可以使用:fillRect(x, y, w, h) 或 strokeRect(x, y, w, h)方法

                   

注意:画布上的矩形都是在不同路径下的,他们之间没有影响;

但是如果不设置自己的颜色,会继承上一个矩形的颜色;

2. clearRect()方法:清除一个矩形区域

clearRect(x, y, w, h);在画布上(x, y)的起始点,宽高分别是w,h的矩形区域

问(1):clearRect()方法只能作用在rect()方法画出的矩形吗?

答(1):不,作用在画布上,清除画布上的某一块区域。

问(2):clearRect()方法能清楚它之前的区域,它之后的代码受不受影响?

答(2):不受影响。之后的代码

注意:后面的代码效果会覆盖前面的代码效果

3. arc()方法画弧形

arc(x, y, r, 起始弧度,终止弧度,弧形方向)

参数解释:(x, y)圆心、r半径、起始弧度和终止弧度、弧度方向:0 顺时针,1 逆时针;

下面是弧度的值:Math.PI  == π

画一个x轴以上的半圆:

<canvas width="200" height="200" id="canvas1"></canvas> <script> var oCanvas = document.getElementById('canvas1'); //获取canvas var ctx = oCanvas.getContext('2d'); //获取canvas的上下文 ctx.arc(100,100,50,0,Math.PI,1); ctx.stroke(); </script>

问:画弧的时候,最后画笔在哪里?

答:在终点的位置

练习:画一个扇形

思路:画一个弧度,然后再从弧度的终点画一个直线,再用closePath(),闭合路径,形成扇形。

注意:矩形有和stroke、fill结合的绘图方法,但是弧度没有,只能用stroke和fill来绘图。

 

转载请注明原文地址: https://www.6miu.com/read-3200019.html

最新回复(0)