首页 > 软件操作教程 > 编程开发 > HTML
题目内容

HTML5 使用canvas API 填充样式

题目答案

正如你所期望的那样,能影响canvas图形外观的并非只有描边,另一个常用于修改图形的方法是指定如何填充其路径和子路径。

【例题】填充样式

代码如下:

// 将填充色设置为绿色并填充树冠

context.fillStyle = '#3399001';

context.fill();


    首先,将fillStyle属性设置成合适的颜色(在后面将看到,还可以使用渐变色或者图案填充)。然后,只要调用context的fill函数,就可以让canvas对当前图形中所有的闭合路径内部的像素点进行填充。

    由于是先描边后填充,因此填充会覆盖一部分描边路径。示例中路径的宽度是4像素,这个宽度是沿路径线居中对齐的,而填充是把路径轮廓内部所有像素全部填充,所以会覆盖描边路径的一半。如果希望看到完整的描边路径,可以在绘制路径(调用context.stroke()之前填充(调用context.fill())。

网友评论(共0条评论)

请自觉遵守互联网相关政策法规,评论内容只代表网友观点!

最新评论

点击加载更多评论>>

软件操作 新人注册送三重礼

已有 22658 名学员学习以下课程通过考试

相关视频试题

最需教育客户端 软件问题一手掌握

去 App Store 免费下载 iOS 客户端