本文详细介绍了HTML5 Canvas中颜色、样式和阴影的使用，包括fillStyle和strokeStyle属性来设置填充和笔触颜色，以及如何通过shadowColor、shadowBlur、shadowOffsetX和shadowOffsetY来调整阴影效果。此外，还讲解了线性渐变和径向渐变的创建，以及addColorStop方法来定义渐变颜色。createPattern方法用于在指定方向上重复元素，例如图片或canvas元素，但要注意其参考起点是canvas画布的左上角。在实际使用时，确保image对象已加载完成是关键。
颜色，样式和阴影
。fillStyle 设置或返回用于填充绘画颜色人，渐变或模式
。strokeStyle 设置或返回用于笔触的颜色呢。渐变或模式
。阴影
1，shadowColor 设置或返回用于阴影的颜色
2，shadowBlur 设置或返回用于阴影的模糊级别
3，shadowOffsetX设置或返回阴影距形状的水平距离
4，shadowOffsetY 设置或返回阴影距形状的垂直距离
。渐变
1.createLinearGradient（x0,y0,x1,y1）创建线性渐变（用在画布内容上）
2.createRadialGradient（x0，y0，x1，y1）创建放射状/环形的渐变（用在画布内容上）
3.addColorStop（）规定渐变对象中的颜色和停止位置 
在指定的方向上重复指定的元素
。createPattern（）方法在指定的方向内重复指定的元素
。元素可以是图片，水平或者其他 canvas元素
。被重复的元素可用于绘制/填充矩形，圆形或线条等的
、
CanvasPatter对象开始平铺图像的参考起点并不是我们当前绘制图形的左上角，而是整个canvas画布的左上角，确切的说，即canvas的起点坐标（0,0）
注意：如果createPattern（）方法的image参数不是当前页面一个已经存在的image对象或Canvas对象，那么我们需要等待浏览器将图片加载完成后才能调用createPattern（）方法及后续操作
扫一扫
1554
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
