没有合适的资源?快使用搜索试试~ 我知道了~
wangmengHB#frontend-notes#5. 画布绘制动作1
需积分: 0 0 下载量 52 浏览量
2022-07-25
14:28:15
上传
评论
收藏 4KB MD 举报
温馨提示
试读
3. 绘制其他来源 1. complete, naturalWidth 和 naturalHeight 1. width: 图片宽度,单位是像素 2. heig
资源推荐
资源详情
资源评论
# 画布绘制
画布绘制主要有三个动作:stroke, fill, 绘制其他来源(drawImage/putImageData).
# 1. stroke()
# 2. fill()
* 填充规则
当我们用到 fill(或者 clip和isPointinPath )你可以选择一个填充规则,该填充规则根据某处在路径的外面或者里面来决定该处是否被填充,这对于自己与自己路径相交或者路径被嵌套的时候是有用的。
两个可能的值:
1. "nonzero": non-zero winding rule, 默认值. https://en.wikipedia.org/wiki/Nonzero-rule
2. "evenodd": even-odd winding rule. https://en.wikipedia.org/wiki/Even%E2%80%93odd_rule
# 3. 绘制其他来源
其他来源可以是其他的 canvas/video/image 元素。
对于 image 和 video 元素需要注意:同源策略限制。非同源的资源需要支持 crossOrigin属性为 anonymous。 否则,使用这个图片将会污染canvas。
对于 image 需要特别注意,在 drawImage 之前要确保 image 已经是完成 load。 判断方法:
1. complete, naturalWidth 和 naturalHeight
```js
export function isImageLoaded(img: HTMLImageElement) {
if (img.complete && img.naturalWidth > 0 && img.naturalHeight > 0 ) {
return true;
}
return false;
}
```
2. 对于未完成加载的图片,继续对其 `addEventListener('load', () => {})`
若调用 drawImage 时,图片没装载�
点击阅读更多
资源评论
小米智能生活
- 粉丝: 30
- 资源: 300
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功