Creating an Image Pattern Bạn có thể sử dụng một hình ảnh bên ngoài để tạo ra một mẫu hình ảnh trên mặt sau của một nguyên tố vải sử dụng phương pháp () createPattern | Chapter 6 Advanced Programming Topics Canvas and Video Creating an Image Pattern You can use an external image to create an image pattern on the back of a canvas element using the createPattern method. The syntax is patternobject image type The image argument references an Image object or else a different canvas element. The type argument is one of the familiar CSS pattern types repeat repeat-x repeat-y and no-repeat. The method returns a Pattern object as shown in the following example function drawPattern var canvas myCanvas var context 2d var pImg new Image images call when image is fully loaded function var pat pImg repeat pat 0 0 300 300 In this code an Image object is created and assigned a source. However before this image can be used in the pattern you need to ensure it is loaded. Therefore you place the rest of the drawing code inside of the Image object s onload event handler. Much like the gradient examples shown earlier the Pattern object that is created with createPattern is then assigned to fillstyle. Figure 6-11 shows the results. Adding Shadows The context object provides four properties that you can use for defining shadows on the canvas shadowColor defines the CSS color of the shadow. shadowBlur specifies the width of the shadow blur. shadowOffsetX defines the horizontal offset of the shadow. shadowOffsetY specifies the vertical offset of the shadow. The following code uses these properties to define a blurred shadow for an image function drawImg var canvas myCanvas var context 2d 140 Chapter 6 Advanced Programming Topics Canvas and Video black 10 5 5 var img3 new Image images function img3 20 30 Figure 6-11 An image pattern .
