龙空技术网

前端 | HTML5 canvas(三)

镜心的小树屋 190

前言:

眼前大家对“html5绘制圆形时关于起始角的设置在第几个参数”都比较注重,看官们都想要知道一些“html5绘制圆形时关于起始角的设置在第几个参数”的相关内容。那么小编同时在网上网罗了一些对于“html5绘制圆形时关于起始角的设置在第几个参数””的相关知识,希望大家能喜欢,大家一起来了解一下吧!

绘制圆和圆弧

HTML5 canvas arc() 方法浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 arc() 方法。

注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。

定义和用法

arc() 方法创建弧/曲线(用于创建圆或部分圆)。

提示:如需通过 arc() 来创建圆,请把起始角设置为 0,结束角设置为 2*Math.PI。

提示:请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。

中心:arc(100,75,50,0*Math.PI,1.5*Math.PI)起始角:arc(100,75,50,0,1.5*Math.PI)结束角:arc(100,75,50,0*Math.PI,1.5*Math.PI)JavaScript 语法:

context.arc(x,y,r,sAngle,eAngle,counterclockwise);
参数值

参数描述x圆的中心的 x 坐标。y圆的中心的 y 坐标。r圆的半径。sAngle起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。eAngle结束角,以弧度计。counterclockwise可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。

示例

绘制矩形

HTML5 canvas rect() 方法浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 rect() 方法。

注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。

定义和用法

rect() 方法创建矩形。

提示:请使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。

JavaScript 语法:

context.rect(x,y,width,height);
参数值

参数描述x矩形左上角的 x 坐标y矩形左上角的 y 坐标width矩形的宽度,以像素计height矩形的高度,以像素计

实例1

实例2

绘制“被填充”的矩形

HTML5 canvas fillRect() 方法

绘制矩形(无填充)

HTML5 canvas strokeRect() 方法

在给定的矩形内清除指定的像素

HTML5 canvas clearRect() 方法

标签: #html5绘制圆形时关于起始角的设置在第几个参数