HTML5 XP session 17 tủ tài liệu bách khoa

Session: 17 Canvas and JavaScript Canvas  in  HTML5   Ÿ  Describe   Ÿ  Explain  the  procedure  to  draw  lines   the  procedure  to  use  color  and  transparency   Ÿ  Explain   Ÿ  Explain  the  procedure  to  work  with  various  drawing  objects   working  with  images  and  text   Ÿ  Describe   Ÿ  Describe  the  procedure  to  create  Web  page  events  with  JavaScript  and   jQuery   Ÿ  Describe  the  process  of  including  external  content  in  Web  pages   ©  Aptech  Ltd     Canvas  and  JavaScript  /  Session  17     The element in HTML5 can be used to draw shapes on Web sites as well as to dynamically draw graphics using JavaScript The element is represented like a rectangle on a page and allows the user to draw arcs, text, shapes, gradients, and patterns The in HTML5 is like the , , or tag except that the content used in it is rendered through JavaScript The element does not contain any drawing abilities, instead, the drawing is done using a JavaScript code To make use of the element, a user has to add the tag on the HTML page Using with JavaScript improves the overall performance of Web sites and avoids the requirement to download images from the sites ©  Aptech  Ltd     Canvas  and  JavaScript  /  Session  17     Ÿ  The  Code  Snippet  demonstrates  the  use  of    element   Canvas canvas{border: medium double red; margin: 4px} the  code,  the    element  is  used  to  display  the  border  of  the   Ÿ  In    element     height  and  width  aPributes  specify  the  size  of  the    element   Ÿ  The   on  the  page     ©  Aptech  Ltd     Canvas  and  JavaScript  /  Session  17     Ÿ  Following  figure  displays  the    element   To draw a element, the user can use a context object The context object contains the drawing functions for a specific style of graphics Two-Dimensional (2d) context is used to work with 2d operations ©  Aptech  Ltd     Canvas  and  JavaScript  /  Session  17     The element in DOM exposes the HTMLCanvasElement interface This interface provides the methods and properties for changing the presentation and layout of canvas elements The HTMLCanvasElement has a getContext(context) method that returns the drawing context for the canvas Ÿ  The  Code  Snippet  demonstrates  the  2d  context  object  for  the  canvas   Canvas window.onload = function() { var canvas = document.getElementById(‘mCanvas’); var ctext = canvas.getContext(‘2d’); ©  Aptech  Ltd     Canvas  and  JavaScript  /  Session  17     ctext.beginPath(); ctext.rect(18, 50, 200, 100); ctext.fillStyle = ”DarkBlue”; ctext.fill(); }; the   code,   the   height   and   width   aPributes   define   the   height   and   width   of   Ÿ  In   the  canvas  element  respecUvely     the  iniUalizer  funcUon,  the  DOM  object  is  accessed  through  the  id  aPribute  and   Ÿ  In   gets  a  2d  context  by  using  the  getContext()  method     rectangle   is   created   by   using   the   rect(18, 50, 200, 100)   method   Ÿ  The   with  x,  y,  height,  and  width  parameters  and  is  posiUoned  at  leW  corner  of  the   page   ©  Aptech  Ltd     Canvas  and  JavaScript  /  Session  17     Ÿ  Following  figure  displays  the    element   ©  Aptech  Ltd     Canvas  and  JavaScript  /  Session  17     can  create  lines  in  a  canvas  using  the  stroke(),  beginPath(),   Ÿ  You   lineTo(),  and  moveTo()  methods   Ÿ  The  following  is  the  syntax  to  create  a  line  in  canvas: Syntax:   ctext.beginPath(); ctext.moveTo(x,y); ctext.lineTo(x,y); ctext.stroke(); where,   -­‐  specifies  a  context  object      ctext   -­‐  Specifies  a  new  drawing  path      beginPath()   -­‐  Specifies  the  creaUon  of  new  sub  path  to  the  given  posiUon      moveTo()   -­‐  Specifies  the  drawing  of  a  line  from  the  context  posiUon  to  the      lineTo()   given  posiUon      stroke()  -­‐  Specifies  how  to  assign  a  color  to  the  line  and  display  it   ©  Aptech  Ltd     Canvas  and  JavaScript  /  Session  17     Ÿ  The  Code  Snippet  demonstrates  creaUng  a  line  in  HTML5  canvas   ctext.beginPath(); ctext.moveTo(100, 150); ctext.lineTo(250, 50); Line ctext.lineWidth = 5; ctext.strokeStyle = “blue”; body { ctext.stroke(); };margin: 0px; padding: 0px; } #mCanvas { border: 1px solidwidth=”360” red; } window.onload = function() { var canvas = document.getElementById(“mCanvas”); var ctext = canvas.getContext(“2d”); ©  Aptech  Ltd     Canvas  and  JavaScript  /  Session  17   10   window.onload = function() { var canvas = document.getElementById(“mCanvas”); var ctext = canvas.getContext(“2d”); ctext.font = “italic 30pt Calibri”; ctext.fillStyle = “MediumVioletRed”; ctext.fillText(“Welcome to HTML5!”, 40, 100); }; this  code,  the  font  text  is  specified  as  Calibri,  style  as  italic,  and  size  is   Ÿ  In   set  to  30pt     fillStyle  property  specifies  the  text  color  and  the  fillText  property   Ÿ  The   is  used  to  set  the  text  on  the  canvas   ©  Aptech  Ltd     Canvas  and  JavaScript  /  Session  17   34   Ÿ  Following  figure  displays  working  with  text  in  a  HTML5  canvas   HTML5  canvas,  the  user  can  set  the  stroke  color  by  using  the   Ÿ  In   strokeText()  method  and  strokeStyle  property  of  the  canvas  context ©  Aptech  Ltd       Canvas  and  JavaScript  /  Session  17   35   Ÿ  The  Code  Snippet  demonstrates  the  use  of  stroke  text  in  HTML5  canvas   = 80; var y = 110; ctext.font = “40pt Calibri”; ctext.lineWidth = 2; // body stroke { color ctext.strokeStyle margin: 0px; = “Brown”; ctext.strokeText(“HTML5”, padding: 0px; x, y); }; } #mCanvas { border: 1px solid black; } window.onload = function() { var canvas = document.getElementById(“mCanvas”); var ctext = canvas.getContext(“2d”); ©  Aptech  Ltd     Canvas  and  JavaScript  /  Session  17   36   this  code,  the  stroke  color  is  set  by  using  the  strokeStyle  property  and  the   Ÿ  In   strokeText()  method   Ÿ  Following  figure  displays  the  stroke  text  in  HTML5  canvas   ©  Aptech  Ltd     Canvas  and  JavaScript  /  Session  17   37   are  two  ways  to  set  the  transparency  for  the  text  and  shapes     Ÿ  There   first  method  is  to  use  the  strokeStyle  and  fillStyle  by  using  the   Ÿ  The   rgb  funcUon   second  method  is  to  use  globalAlpha  drawing  state  property,  which  can   Ÿ  The   be  applied  universally     globalAlpha  property  is  a  value  that  ranges  between  0  (fully  transparent)   Ÿ  The   and  1  (fully  opaque)   Ÿ  The  Code  Snippet  demonstrates  the  use  of  globalAlpha  property   body { margin: 0px; padding: 0px; } #mCanvas { border: 1px solid black; } ©  Aptech  Ltd     Canvas  and  JavaScript  /  Session  17   38   window.onload = function() { var canvas = document.getElementById(“mCanvas”); var ctext = canvas.getContext(“2d”); ctext.fillStyle = “Indigo”; ctext.strokeStyle =”black”; ctext.lineWidth=2; ctext.font = “italic 30pt Calibri”; ctext.fillText(“HTML5”, 40, 100); ctext.strokeText(“HTML5”, 40, 100); ctext.fillStyle=”blue”; ctext.globalAlpha=0.5; ctext.fillRect(100, 10, 150, 100); }; ©  Aptech  Ltd     Canvas  and  JavaScript  /  Session  17   39   the  code,  the  fillStyle  and  strokeStyle  is  used  to  color  the  text     Ÿ  In   ‘HTML5’  text  lineWidth  is  specified  as  2  and  the  font-family  is  set  to   Ÿ  The   Calibri  with  italic  style  and  font-size  to  30pt     fillText  property  fills  the  color  and  strokeText  property  applies  the   Ÿ  The   stroke  color  to  the  HTML5  text     fillStyle  is  set  to  blue  and  globalAlpha  property  is  set  to  0.5     Ÿ  The   fillRect(100, 10, 150, 100)  specifies  the  x,  y,  height,  and   Ÿ  The   width  of  the  rectangle     Ÿ  Following  figure  displays  the  stroke  text  in  HTML5  canvas   ©  Aptech  Ltd     Canvas  and  JavaScript  /  Session  17   40   also  offers  different  events  to  deal  with  common  interacUons  when  the   Ÿ  jQuery   user  moves  the  mouse  or  switches  between  two  acUons  while  clicking     Ÿ  The  following  are  the  events:   Ø  hover()  event     mouseenter  and  mouseleave  are  the  two  events  oWen  used  together   Ÿ  The   provides  a  hover()  funcUon  that  accepts  two  parameters     Ÿ  jQuery   first  parameter  executes  when  the  mouse  moves  over  the  element  and  the   Ÿ  The   second  funcUon  executes  when  the  mouse  moves  away  from  the  element   Ÿ  The  Code  Snippet  demonstrates  the  hover  event   $(document).ready(function(){ ©  Aptech  Ltd     Canvas  and  JavaScript  /  Session  17   41   $(“p”).hover(function(){ $(“p”).css(“background-color”,”red”); },function(){ $(“p”).css(“background-color”,”maroon”); }); });

Hover the mouse on this line.

the  code,  the  hover()  method  is  used     Ÿ  In   the  mouse  is  placed  on  the  text,  then  the  background  color  changes  to   Ÿ  When   red     the  user  moves  the  mouse  outside  the  text,  the  background  color  changes   Ÿ  When   to  maroon   ©  Aptech  Ltd     Canvas  and  JavaScript  /  Session  17   42   figure  displays   Ÿ  Following   the  mouseenter  effect   ©  Aptech  Ltd     figure  displays   Ÿ  Following   the  mouseleave  effect   Canvas  and  JavaScript  /  Session  17   43   Ø  toggle()  event     toggle()  event  works  in  a  similar  manner  as  that  of  the  hover()  event,   Ÿ  The   except  that  it  responds  to  mouse  clicks     toggle()  funcUon  accepts  more  than  two  funcUons  as  arguments     Ÿ  The   the  funcUons  passed  to  the  toggle()  event  will  react  to  its  corresponding  click   Ÿ  All   acUon   Ÿ  The  Code  Snippet  demonstrates  the  toggle  event   function(){ $(“body”).css(“background-color”,”grey”);} ); }); $(document).ready(function(){ $(“p”).toggle(function(){ $(“body”).css(“background-color”,”blue”);},

Click to change the colors.

function(){ $(“body”).css(“background-color”,”pink”);}, ©  Aptech  Ltd     Canvas  and  JavaScript  /  Session  17   44   the  code,  the  toggle()  method  is  used     Ÿ  In   the  user  clicks  the  text  then  the  background-color  of  the  document   Ÿ  When   is  changed  to  blue,  pink,  and  grey  respecUvely   figure  displays   Following  figure  displays   Ÿ  Following   Ÿ  the  toggle  effect  to  blue   the  toggle  effect  to  pink   ©  Aptech  Ltd     Canvas  and  JavaScript  /  Session  17   45   Ÿ  Following  figure  displays  the  toggle  effect  to  grey   ©  Aptech  Ltd     Canvas  and  JavaScript  /  Session  17   46   HTML5 introduces the tag that allows the user to push external content in the Web page This model is referred to as push model Since the tag is not supported in many browsers, users make use of the tag for this purpose The tag is a new element in HTML5 and it is represented as a container for an interactive content or an external application The tag is often used to add elements such as image, audio, or video on a Web page Ÿ  The  Code  Snippet  demonstrates  the  use  of    tag   Ÿ  In  this  code,  the  src  aPribute  specifies  the  path  of  an  external  file  to  embed   ©  Aptech  Ltd     Canvas  and  JavaScript  /  Session  17   47    element  is  a  drawing  area  where  the  user  can  draw  graphics,  use   Ÿ  The   images,   add   animaUons,   and   also   add   text   for   enhancing   the   user   experience   on  Web  pages     create  a  line,  on  a  canvas  one  can  use  the  stroke(),  beginPath(),  lineTo(),  and   Ÿ  To   moveTo()  methods     Ÿ  Arcs  are  represented  using  a  start  angle,  an  end  angle,  a  radius,  a  center  point,     and  the  drawing  direcUon  (anUclockwise  or  clockwise)   Ÿ  With  HTML5  canvas,  the  user  can  create  a  rectangle  using  the  rect()  method     Ÿ  Bezier  curves  are  represented  with  the  two  control  points,  context  points,  and     an  end  point   Ÿ  HTML5     canvas   allows   the   user   to   create   quadraUc   curves   using   the   quadraUcCurveTo()  method   canvas   enables   the   user   to   draw   image   object   on   canvas   using   the   Ÿ  HTML5   drawImage()  method   ©  Aptech  Ltd     Canvas  and  JavaScript  /  Session  17   48   ...Canvas  in HTML5   Ÿ  Describe   Ÿ  Explain  the  procedure  to  draw  lines   the  procedure  to  use  color  and  transparency   Ÿ  Explain   Ÿ  Explain  the  procedure  to...   Canvas  and  JavaScript  / Session 17     Ÿ  Following  figure  displays  the    element   ©  Aptech  Ltd     Canvas  and  JavaScript  / Session 17     can  create  lines  in... Canvas  and  JavaScript  / Session 17   11   Ÿ  Following  figure  displays  a  line  drawn  in  a  canvas   ©  Aptech  Ltd     Canvas  and  JavaScript  / Session 17   12   canvas  allows