简单的H5标签canvas的封装用法（如有不对，欢迎指正）

最新推荐文章于 2023-01-17 16:58:23 发布

迷途明

最新推荐文章于 2023-01-17 16:58:23 发布

阅读量479

点赞数

本文链接：https://blog.csdn.net/weixin_41905935/article/details/80471260

版权

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
  lang= 
  "en" 
  > 
 

 
  < 
  head 
  > 
 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
 
  < 
  title 
  >Document 
  </ 
  title 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  style 
  > 
 
 
  canvas{ 
 
 
  border: 
  1px 
  solid 
  #f00; 
 

   } 
 
 
  < 
  / 
  style 
  > 
 
 
  < 
  body 
  > 
 
 
  <!--1 设置画布的大小，记住宽高一定要在canvas标签里面设置，不然画布会拉伸，变形 --> 
 
 
  < 
  canvas 
  id= 
  "cas" 
  width= 
  "300" 
  height= 
  "300" 
  ></ 
  canvas 
  > 
 
 
  </ 
  body 
  > 
 
 
  < 
  script 
  > 
 
 
  // 2获取到画布元素 
 
 
  var 
  cas = 
  document. 
  getElementById( 
  "cas"); 
 
 
  // 3获取画布上下文对象 
 
 
  var 
  ctx = 
  cas. 
  getContext( 
  "2d"); 
 
 
  // 4开始封装函数 
 
 
  function 
  cans( 
  simple, 
  arr) { 
 
 
  // 4.1声明变量获取到数组的第一个值，也就是图形的起点 
 
 
  var 
  point = 
  arr[ 
  0]; 
 
 
  // 4.2开始设置画布起点 
 
 
  simple. 
  moveTo( 
  point. 
  x, 
  point. 
  y); 
 
 
  // 4.3使用遍历进行中间步骤的实现 
 
 
  for ( 
  let 
  i = 
  1; 
  i < 
  arr. 
  length; 
  i++) { 
 
 
  // 4.4声明变量，获取到数组arr中除了起点以外的值 
 
 
  var 
  point1 = 
  arr[ 
  i]; 
 
 
  // 4.5中间其他线条的实现 
 
 
  simple. 
  lineTo( 
  point1. 
  x, 
  point1. 
  y); 
 

   } 
 
 
  // 4.6连接起点 
 
 
  simple. 
  lineTo( 
  point. 
  x, 
  point. 
  y); 
 
 
  // 4.7执行代码 
 
 
  simple. 
  stroke(); 
 

   } 
 

 
  // 5设置要实现的数组 
 
 
  var 
  arr=[ 
 

   { 
  x: 
  10, 
  y: 
  10}, 
 

   { 
  x: 
  100, 
  y: 
  10}, 
 

   { 
  x: 
  10, 
  y: 
  100}, 
 

   { 
  x: 
  100, 
  y: 
  100}, 
 

   ] 
 
 
  // 6调用函数 
 
 
  cans( 
  ctx, 
  arr); 
 
 
  < 
  / 
  script 
  > 
 

 
  </ 
  html 
  > 
 