用canvas绘制一个饼状图

Canvas,网页原来是可以画出来的…

认识Canvas
Canvas绘制矩形
Canvas绘制圆形
使用moveTo()和lineTo()绘制路径
Canvas绘制一个饼状图
认识Canvas
HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript)。

不过, 元素本身并没有绘制能力(它仅仅是图形的容器) - 必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。
在页面放置一个canvas元素,就相当于放置了一个画布,可以在其中进行图形的绘制。但绘制图形,并不是指使用鼠标作画,而是需要javascript进行配合。创建canvas的时候,他默认的宽高为300px*150px。
Canvas的 getContext(“2d”) 对象的属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等。

<canvas id="canvas">我是一个画布</canvas>

​​​Canvas绘制矩形
我们在HTML页面中直接插入canvas标签,也可以对它设置宽度和高度,切记设置canvas的时候不可以利用css样式进行设置。那么,我们想在canvas上面画出矩形,我们就需要认识以下几种api。

方法 描述
getContext() 获取绘图环境,可选参数"2d"
fillRect(x,y,width,height) 绘制一个填充的矩形

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值