tailieunhanh - Professionali Phone and iPod touch Programming phần 6

Các thuộc tính fillStyle và strokeStyle của đối tượng bối cảnh cung cấp một cách để bạn thiết lập màu sắc, giá trị alpha, hay phong cách của hình dạng hoặc đường mà bạn đang vẽ. (Xem Bảng 6-1 cho một danh sách các tất cả các thuộc tính ngữ cảnh.) Nếu bạn muốn đặt một giá trị màu sắc, bạn có thể sử dụng bất kỳ màu nào CSS, chẳng hạn như: | Chapter 6 Advanced Programming Topics Canvas and Video Adding Color and Transparency The fillstyle and strokestyle properties of the context object provides a way for you to set the color alpha value or style of the shape or line you are drawing. See Table 6-1 for a list of all context properties. If you would like to set a color value you can use any CSS color such as 666666 rgb 125 125 125 Once you set fillStyle or strokeStyle it becomes the default value for all new shapes in the canvas until you reassign it. You can also use rgba r g b a to assign an alpha value to the shape you are filling in. The r g and b parameters take an integer value between 0-255 while a is a float value between and being fully transparent and being fully opaque . For example the following code draws two circles in the canvas. The large circle has a 90 percent transparency value while the smaller circle has a 30 percent transparency value function drawTransCircles var canvas myCanvas var context 2d Large circle - 90 transparency rgba 13 44 50 95 90 60 0 2 pi 0 Smaller circle - 30 transparency rgba 0 0 255 135 120 40 0 2 pi 0 Figure 6-8 shows the two colored semitransparent circles. Alternatively you can set the context .globalAlpha property to set a default transparency value for all stroke or fill styles. Once again value should be a float number between and . Adding Gradients You can create both linear and radial gradients by using the following methods of the context object createLinerGradient x1 y1 x2 y2 creates a gradient from the starting point x1 y1 to the end point x2 y2 . createRadialGradient x1 y1 r1 x2 y2 r2 creates a gradient circle. The first circle is based on the x1 y1 and r1 values and the second circle based on the x2 y2 and r2 values. Both