Đang chuẩn bị nút TẢI XUỐNG, xin hãy chờ
Tải xuống
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 context.fillStyle 666666 context.strokeStyle 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 0.0 and 1.0 0.0 being fully transparent and 1.0 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 document.getElementById myCanvas var context canvas.getContext 2d Large circle - 90 transparency context.fillStyle rgba 13 44 50 0.9 context.beginPath context.arc 95 90 60 0 2 pi 0 context.fill Smaller circle - 30 transparency context.fillStyle rgba 0 0 255 0.3 context.beginPath context.arc 135 120 40 0 2 pi 0 context.fill 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 0.0 and 1.0. 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
