星空网 > 软件开发 > 网页设计

HTML5 Canvas 基本操作

<canvas> - 定义使用 JavaScript 的图像绘制。

p.s.

  • 无法使用CSS为画布设置大小,要么在<canvas>中使用width和height单独定义,要么在js中设置。canvas的默认画布大小为300×150。
  • getContext是DOM对象的方法,也就是原生js方法,不能用jQuery对象直接获取

————————————————————————————————————————————

Demo1 - 绘制矩形

步骤:

  1. 获取canvas元素
  2. 取得上下文
  3. 填充与绘制边框
  4. 设置绘制样式
  5. 指定画笔宽度
  6. 设置颜色值
  7. 绘制矩形

HTML5  Canvas 基本操作

<<canvas.js>>

function draw(elem) {  // 1.获取canvas元素  var canvas = document.getElementById(elem);  canvas.width = "600";  canvas.height = "500";  // 2.取得上下文  var context = canvas.getContext('2d');  // 3.填充与绘制边框  context.fillStyle = '#000';  // 4.设置绘制样式  context.strokeStyle = '#f60';  // 5.指定画笔宽度  context.lineWidth = 3;  // 7.绘制矩形  context.fillRect(100,0,300,400);  context.strokeRect(130,100,180,120);}

<<index.html>>

<!DOCTYPE html><html><head>  <title>canvas</title>  <script type="text/javascript" src='/images/loading.gif' data-original="canvas.js"></script></head><body onload="draw('canvas')">  <!-- 通过draw函数进行绘图 -->  <!-- 定义画布 -->  <!--   <canvas id="canvas" width="600px" height="500px"></canvas> -->  <canvas id="canvas" style="border:1px black solid;"></canvas></body></html>

————————————————————————————————————————————

Demo2 - 绘制圆形

步骤:

  1. 开始创建路径
  2. 创建图形路径
  3. 创建完成关闭路径
  4. 按绘制样式调用绘制方法进行绘制

HTML5  Canvas 基本操作

<<canvas.js>>

function draw(elem) {  var canvas = document.getElementById('canvas');  canvas.width = 600;  canvas.height = 500;  var context = canvas.getContext('2d');  context.fillStyle = "#eeefff";  context.fillRect(0, 0, 600, 500);  for (var i = 0; i < 10; i++) {    context.beginPath(); // 创建开始路径    context.arc(i * 20, i * 30, i * 10, 0, Math.PI * 2, true); // 创建图形路径    context.closePath(); // 创建完成关闭路径    context.fillStyle = "rgba(255,0,0,0.25)"; // 路径样式    context.fill();  }}

————————————————————————————————————————————

Demo3 - 绘制文字

  1. 设置文字字体

    p.s.设置字体时可以设置多个不同字体,以优先级排列,如果没有当前字体则使用下一个

  2. 设置文字垂直对齐方式
  3. 设置文字水平对齐方式

HTML5  Canvas 基本操作

<<canvas.js>>

function draw(elem) {  var canvas = document.getElementById('canvas');  canvas.width = 800;  canvas.height = 300;  context = canvas.getContext('2d');  context.fillStyle = "green";  context.fillRect(0, 0, 800, 300);  // 设置文字颜色  context.fillStyle = "#fff";  context.strokeStyle = "#fff";  // 设置字体  context.font = "bold 40px 'KaiTi','SimSun','Microsoft YaHei'";  // 设置对齐方式  context.textAlign = 'start';  context.textBaseline = 'Bottom';  // 设置内容  context.fillText('绘制文字', 200, 50); // 填充方式  context.strokeText('绘制文字', 100, 150); // 轮廓方式  context.fillText('1111111111111111111111111111111111111111111', 200, 250, 500); // 防止溢出,超过宽度时会压缩}

————————————————————————————————————————————

Demo4 - 保存文件

Canvas API保存文件是通过绘画状态动态输出到一个data URL地址所指向的数据的过程

toDataURL()方法

<<canvas.js>>

1 function draw(elem) {2   var canvas = document.getElementById(elem);3   canvas.width = 800;4   canvas.height = 500;5   var context = canvas.getContext('2d');6   context.fillStyle = "#eeefff";7   context.fillRect(0,0,800,500);8   window.location = canvas.toDataURL('image/jpeg');9 }

————————————————————————————————————————————

Demo5 - 简单动画

HTML DOM setInterval() 方法

HTML5  Canvas 基本操作

<<canvas.js>>

function draw(elem) {  var canvas = document.getElementById(elem);  canvas.width = 800;  canvas.height = 500;  var context = canvas.getContext('2d');  context.fillStyle = "#eeefff";  context.fillRect(0, 0, 800, 500);  context.fillStyle = '#f90';  // 画布擦除一部分  context.clearRect(50, 50, canvas.width - 50, canvas.height - 50);  // 每100ms执行一次painting()函数,绘制一个新的小方框  var i = 0;  var paintId = setInterval(painting, 100);  function painting() {    ++i;    context.fillRect(80 + i * 15, 80, 10, 10);    if (i == 20) {      clearInterval(paintId);    }  }}

HTML5  Canvas 基本操作

 




原标题:HTML5 Canvas 基本操作

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

最值得中小卖家起步的市场 - 东南亚虾皮Shopee越南站:https://www.goluckyvip.com/news/3926.html
调研显示疫情期间东南亚和南亚数字服务需求飙升:https://www.goluckyvip.com/news/3927.html
东南亚电商Zalora举行12.12 Harbolnas年终大促:https://www.goluckyvip.com/news/3928.html
速卖通线上发货的常见问题:清关费用 节假日发货期:https://www.goluckyvip.com/news/3929.html
关于实施《中华人民共和国海关企业信用管理办法》有关事项的公告!:https://www.goluckyvip.com/news/393.html
东南亚电商Zalora开启Harbolnas12.12大促:https://www.goluckyvip.com/news/3930.html
抖音电商副总裁将赴TikTok电商任职:https://www.goluckyvip.com/news/187213.html
中国跨境电商持续爆发,韩国本土企业慌了:https://www.kjdsnews.com/a/1836491.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流