This is the sixth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

The plot

Grammar:

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
Copy the code
  • imgPrescribed to be usedImage, canvas, or video.
  • sx,sy,swidth,sheightAll values are optional. Define the relative position, width and height of the clipped image
  • width,heightWidth and height of the image

Draw text

Grammar:

// Fill the text
context.fillText(text,x,y,maxWidth);
// Stroke text
context.strokeText(text,x,y,maxWidth);
The measureText() method returns an object containing the specified font width in pixels.
context.measureText(text).width;

Copy the code
  • fontFont =” ITALic small-caps Bold 12px Arial “; The default 10 px sans-serif
  • textAlignAlign attribute: context. TextAlign = “center | | end left | right |start“;
  • textBaselineTextBaseline =” Context. TextBaseline =”alphabetic|top|hanging|middle|ideographic|bottom”;

Drawing graphics

Create a linear gradient (for the canvas content)

Gradients can be used to fill rectangles, circles, lines, text, and more; Use this object as the value of the strokeStyle or fillStyle property.

Grammar:

// Linear gradient
context.createLinearGradient(x0,y0,x1,y1);
// Radial/circular tween objects
context.createRadialGradient(x0,y0,r0,x1,y1,r1);

// Draw the gradient color, *stop* a value between 0.0 and 1.0, indicating the position between the start and end of the gradient.
gradient.addColorStop(stop,color);
Copy the code

Colors, styles, and shadows

  • fillStyleSets or returns the color, gradient, or mode used to fill the painting
  • strokeStyleSets or returns the color, gradient, or mode used for the stroke

context.strokeStyle=color|gradient|pattern; | \

context.fillStyle=color|gradient|pattern;

// The createPattern() method repeats the specified element in the specified direction.
// Elements can be images, videos, or other < Canvas > elements.
Repeated elements can be used to draw/fill rectangles, circles, lines, etc.
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
Copy the code

Set the shadow

context.shadowColor=color; context.shadowBlur=number; context.shadowOffsetX=number; context.shadowOffsetY=number;

DEMO

The gradient

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var my_gradient=ctx.createLinearGradient(0.0.170.0);
my_gradient.addColorStop(0."black");
my_gradient.addColorStop(0.5."red");
my_gradient.addColorStop(1."white");

ctx.fillStyle=my_gradient;
ctx.fillRect(20.20.150.100);
Copy the code

Radial/circular gradient

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var my_gradient=ctx.createLinearGradient(0.0.0.170);
my_gradient.addColorStop(0."black");
my_gradient.addColorStop(1."white");

ctx.fillStyle=my_gradient;
ctx.fillRect(20.20.150.100);
Copy the code

Image filling

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("lamp"); var pat=ctx.createPattern(img,"repeat"); ,0,150,100 CTX. The rect (0); ctx.fillStyle=pat; ctx.fill();Copy the code

Turn video canvas

<p>Videos to use:</p>

<video id="video1" controls width="270" autoplay>
  <source src="/example/html5/mov_bbb.mp4" type='video/mp4'>
  <source src="/example/html5/mov_bbb.ogg" type='video/ogg'>
  <source src="/example/html5/mov_bbb.webm" type='video/webm'>
</video>

<p>Canvas (every 20 milliseconds, the code draws the current frame of the video) :</p>

<canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');

v.addEventListener('play'.function() {var i=window.setInterval(function() {ctx.drawImage(v,0.0.270.135)},20); },false);
v.addEventListener('pause'.function() {window.clearInterval(i); },false);
v.addEventListener('ended'.function() {clearInterval(i); },false);  

</script>
Copy the code