首页 > 代码库 > html5入门信息

html5入门信息

1、canvas

1)介绍:HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript)。不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。
2)

属性描述
fillStyle设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle设置或返回用于笔触的颜色、渐变或模式
shadowColor设置或返回用于阴影的颜色
shadowBlur设置或返回用于阴影的模糊级别
shadowOffsetX设置或返回阴影距形状的水平距离
shadowOffsetY设置或返回阴影距形状的垂直距离
方法描述
createLinearGradient()创建线性渐变(用在画布内容上)
createPattern()在指定的方向上重复指定的元素
createRadialGradient()创建放射状/环形的渐变(用在画布内容上)
addColorStop()规定渐变对象中的颜色和停止位置

       

    canvas元素绘制图像的时候有两种方法,分别是

        context.fill()//填充

        context.stroke()//绘制边框

    style:在进行图形绘制前,要设置好绘图的样式

        context.fillStyle//填充的样式

        context.strokeStyle//边框样式

    context.lineWidth//图形边框宽度

shadowOffsetX 属性设置或返回形状与阴影的水平距离。

shadowOffsetX=0 指示阴影位于形状的正下方。

shadowOffsetX=20 指示阴影位于形状 left 位置右侧的 20 像素处。

shadowOffsetX=-20 指示阴影位于形状 left 位置左侧的 20 像素处。

 

html5入门信息