html5 getting started information_html/css_WEB-ITnose

1. canvas

1) Introduction: HTML5 tag is used to draw images (via script, usually JavaScript). However, the element itself has no drawing capabilities (it's just a container for graphics) - you have to use a script to do the actual drawing. The getContext() method returns an object that provides methods and properties for drawing on the canvas.
2)

属性 描述

fillStyle	设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle	设置或返回用于笔触的颜色、渐变或模式
shadowColor	设置或返回用于阴影的颜色
shadowBlur	设置或返回用于阴影的模糊级别
shadowOffsetX	设置或返回阴影距形状的水平距离
shadowOffsetY	设置或返回阴影距形状的垂直距离

方法 描述

createLinearGradient()	创建线性渐变（用在画布内容上）
createPattern()	在指定的方向上重复指定的元素
createRadialGradient()	创建放射状/环形的渐变（用在画布内容上）
addColorStop()	规定渐变对象中的颜色和停止位置

                                                                                                                                                                                 

context.stroke()//Draw the border

style: Before drawing graphics, set the drawing style

context.fillStyle//Fill style

context.strokeStyle//Border style

context.lineWidth//Graphic border width

shadowOffsetX property sets or returns the horizontal distance between the shape and the shadow.

shadowOffsetX=0 indicates that the shadow is directly underneath the shape.

shadowOffsetX=20 indicates that the shadow is located 20 pixels to the right of the shape's left position.

shadowOffsetX=-20 indicates that the shadow is located 20 pixels to the left of the shape's left position.