EN
이 콘텐츠는 한국어로 제공되지 않아 영어 버전으로 표시됩니다.

fillStyle property

Gets or sets the current style that is used to fill shapes.

HTML Canvas 2D Context, Section 5Internet Explorer 9

Syntax

JavaScript

fillstyle = object.fillStyle

Property values

Type: any

The fill style, as specified by one of the following values:

CSS color

A string that contains a CSS color value to create a solid color fill (for example, blue, red, or black).

Gradient

A CanvasGradient object to create a gradient fill.

repeat-y

A CanvasPattern object to create a pattern fill.

no-repeat

The pattern prints only once and does not repeat.

Exceptions

ExceptionCondition
SecurityError

The p attribute is set to an CanvasPattern object that was created from a img or video element that is not of the same origin or domain as the document that owns the canvas element.

Standards information

Remarks

Invalid values are ignored.

Examples

The following code example shows filling rectangles with a linear gradient and a solid color. sample in action.


<!DOCTYPE html> 
<html>
<head>
 <title>Fill style example</title>
</head>
<body>
  <h1>FillStyle example</h1>
  <canvas id="MyCanvas" width="600" height="500">
    This browser or document mode doesn't support canvas
  </canvas> 
  <script>
    //  Get canvas element and context
    var canvas = document.getElementById("MyCanvas");
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");
      gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
      // Add the colors with fixed stops at 1/4 of the width.
      gradient.addColorStop("0", "magenta");
      gradient.addColorStop(".25", "blue");
      gradient.addColorStop(".50", "green");
      gradient.addColorStop(".75", "yellow");
      gradient.addColorStop("1.0", "red");

      // Use the gradient.
      ctx.fillStyle = gradient;
      // Now fill with a solid color
      ctx.fillRect(0, 0, 300, 250);
      ctx.fillStyle = "blue";
      ctx.fillRect(250, 300, 600, 500);
    }

  </script>
</body>
</html>


You can also use a video or an image as a fillStyle. This example shows fillStyle using a video. The example also uses requestAnimationFrame to pace the display of video frames as the style to what the system can currently handle. Using requestAnimationFrame also stops the animation when the browser window is covered by another window. See the sample in action.


<!DOCTYPE html> 
<html>
  <head>
    <title>Video pattern example</title>   
    <!-- only force Internet Explorer standards mode for testing on local or intranet machine -->
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge" /> -->
    <style>
      button {
      width:150px;
      }

    </style>
  </head>
  <body>
    <table>
      <tr>
        <td> 
          <div>
            <h1>Canvas Patterns with Video</h1>
            <h3>Make your page full screen, and click the buttons to change the view</h3>
            <button onclick="draw('repeat')">Repeat all</button>
            <button onclick="draw('repeat-x')">Repeat across</button> 
            <button onclick="draw('repeat-y')">Repeat down</button>
            <button onclick="draw('no-repeat')">No Repeat</button><br />     
            <label>Enter a video URL: <input type="text" id="videoSrc" size="80" value="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" /></label> <br />
          </div>
        </td>
        <td>  
          <video id="pix" controls autoplay width="300">
            This browser or document mode doesn't support video
          </video><br />

        </td>
      </tr>
    </table>   
    <canvas id="MyCanvas" width="2000" height="2000">This browser or document mode doesn't support canvas</canvas>
    <script >
      // Some global variables    
      var canvas = document.getElementById("MyCanvas");
      var lastDirection;
      var timerID;
      var pattern;
      var lastSrc;
      var video = document.getElementById("pix"); // Get the video object.
      //  Check for canvas, and get context
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");  // Get the context.
        //  Optionally set based on window width/height
   //     canvas.width = window.innerWidth;  // Set canvas width and height
   //     canvas.height = window.innerHeight;
        var w = canvas.width;  // Set up w and h for loop below.              
        var h = canvas.height;
      }

      function draw(direction) {
        if (ctx) {
          var src = document.getElementById("videoSrc").value;
          if (src == "") {
            return false;
          }

          if (lastSrc != src) {   // Change of video
            video.src = src;    // Assign the video src
            lastSrc = src;      // Reassign lastSrc          
            video.load();       // Load src into video control
            video.play();       // Play it
          }

          // Clear the screen every time a new direction is selected.
          if (lastDirection != direction) {  // Check if direction has changed
            window.cancelAnimationFrame(timerID);
            ctx.clearRect(0, 0, canvas.width, canvas.height);    // Clear the last image.
            lastDirection = direction;  // Reset the direction flag
          }
          draw2();
        }
      }

      function draw2() {
        if (video.paused || video.ended) {
          return false;
        } // Stop loop when video ends
        pattern = ctx.createPattern(video, lastDirection); // Get the video frame   
        ctx.fillStyle = pattern;  // Assign pattern as a fill style. 
        ctx.fillRect(0, 0, w, h); // Fill the canvas. 
        timerID = window.requestAnimationFrame(draw2);
      }
      draw("repeat");   // Start video when loaded
    </script>
  </body>
</html> 


See also

CanvasRenderingContext2D
createPattern
msFillRule

 

 

표시:
© 2014 Microsoft