美文网首页
Canvas et Html5

Canvas et Html5

作者: plightfield | 来源:发表于2017-09-13 16:20 被阅读0次
image.png

HTML5

​  Divided into sections by<head> and <body> as former, and add new tags such as <nav>, <article>,<header> and <footer> etc.

  <!doctype html> should be always the first line of HTML5.

  <canvas>element itself is accessible in DOM, but it's elements's are not accessible to DOM. cause it's work in immediate mode and not have its own objects.

  No longer have to specify the script type in HTML5.

  You can put text within canvas tags, so that it'll displayed if the browser does not support canvas.

<!-- detect support -->
<canvas>Your browser does not support HTML5 canvas</canvas>

  And within javascript use function below to detect support:

function canvasSupport () {
    return !!document.createElement('canvas').getContext; 
    //detect whether the canvas element exist and if it's context exist or null
}
function canvasApp() {
   if (!canvasSupport) {
      return;
  }

}

Canvas

Basic Rectangle Shape


fillRect(x,y,width,height);

  Filled rectangle with position [x,y] for width and height.

strokeRect(x,y,width,height);

  Rectangle outline.

clearRectangle(x,y,width,height);

  Clear the specified area.

  Set up style before use:

context.fillstyle = 'red';
context.strokeStyle = 'black';
context.lineWidth  = 2;

Canvas state


  Canvas will store transformations, current clipping region and current values, and can be save and restored by:

context.save();
context.restore()

Using paths to create lines


beginPath(); // to start a path
    beginPath(); closePath(); // subpath considered closed before outer
closePath(); // to end a path

eg:

 context.strokeStyle  = "black";
 context.lineWidth  = 10;
 context.lineCap  = 'square'; // end style of path
 context.beginPath();
 context.moveTo(20, 0);
 context.lineTo(100, 0);
 context.stroke(); // draw
 context.closePath();

LineCap attributes

  1. butt: defualt, a flat edge that is perpendicular to the end of the line.
  2. round: semicicle edge.
  3. square: rectangle edge.

lineJoin attributes

  1. miter: edge is drawn at the join.
  2. round: round edge drawn at the join.

Advanced path methods


1. arc()
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);

  x,y define the center of the circle, startAngle and endAngle are radians, anticlockwise define the direction in boolean value.

eg:

context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*360, false);
2. arcTo()
context.arcTo(x1, y1, x2, y2, radius);

  Draw a arc from [x1, y1] to [x2, y2].

3. Bezier curves
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); // cubic mode
context.quadraticCurveTo(cpx, cpy, x, y); // quadratic

Compositing


  Control over the transparency and the layering effects.

  • globalAlpha:

  Default -> 1.0, range[0.0,1.0], must be set before a shape is drawn.

  • globalCompositeOperation:

  How shapes are drawn.

  • copy

  Where they overlap, displays the source and not the destination.

  • destination-atop

  Destination atop the source.

  • destination-in

  Destination in the source.

  • destination-out

  Destination out source.

  • destination-over

  Destination over the source.

  • lighter

  Displays the sum of the source image and destination image.

  • source-atop

  Source atop the destination.

  • source-in

  Source in the destination.

  • source-out

  Source out destination.

  • source-over

  (Default.) Source over destination.

  • xor

  Source xor destination.

eg:

//draw a big box on the screen
context.fillStyle = "black"; //
context.fillRect(10, 10, 200, 200);

//leave globalCompositeOperation as is
//now draw a red square
context.fillStyle = "red";
context.fillRect(1, 1, 50, 50);

//now set it to source-over
context.globalCompositeOperation = "source-over";
//draw a red square next to the other one
context.fillRect(60, 1, 50, 50);      //now set to destination-atop
context.globalCompositeOperation = "destination-atop";
context.fillRect(1, 60, 50, 50);

//now set globalAlpha
context.globalAlpha = .5;

//now set to source-atop
context.globalCompositeOperation = "source-atop";
context.fillRect(60, 60, 50, 50);
image.png

globalCompositeOperation does not work properly any more

Simple canvas transformations


  Nowadays mostly used transformations are scale and rotate:

context.setTransform(1,0,0,1,0,0); // transform matrix (according to the former)
var angleInRadians = 45 * Math.PI / 180;
context.rotate(angleInRadians); // use radians instead of degrees
context.translate(x,y); // reset the origin locations
image.png

相关文章

  • Canvas et Html5

    HTML5 ​  Divided into sections by and as former, and a...

  • html5 Canvas画图5:曲线之arc

    本文属于《html5 Canvas画图系列教程》 在《html5 Canvas画图教程2:Canvas画线条 基础...

  • canvas笔记

    一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...

  • canvas

    @(HTML5)[canvas与SVG] [TOC] 十 、canvas canvas的基本用法 canvas是H...

  • HTML5 Canvas 完整测试 - canvas 标签

    在 html5 文档内创建 canvas 画布: “画布”(canvas) 是 html5 中独有的元素,通过它可...

  • HTML5 Canvas笔记——绘图剪纸

    参考书目:《HTML5 Canvas核心技术 图形、动画与游戏开发》 HTML5 Canvas绘图剪纸

  • canvas浅尝

    简单了解canvas 1.什么是canvas HTML5 的 canvas 元素使用 JavaScript 在网页...

  • canvas学习一

    一、什么是canvas? canvas 是 HTML5 的标签元素,使用 JavaScript 在canvas里绘...

  • 14-JS canvas 学习

    Canvas简介 canvas作用: canvas元素可以让用户在网页上绘制图形; canvas介绍 HTML5中...

  • 1.canvas基础(1)

    canvas定义 Canvas 对象是 HTML5 中新增的。HTML5 标签用于绘制图像(通过脚本,通常是 ...

网友评论

      本文标题:Canvas et Html5

      本文链接:https://www.haomeiwen.com/subject/cfzksxtx.html