HTML5 Canvas 第二篇

最新推荐文章于 2024-05-10 10:10:22 发布

c________________j

最新推荐文章于 2024-05-10 10:10:22 发布

阅读量1.7k

点赞数

分类专栏： Html5 文章标签： Html5 canvas 图形

本文链接：https://blog.csdn.net/c________j/article/details/18749497

版权

本文深入探讨HTML5 Canvas的变换、路径和绘制方法，通过实例讲解如何绘制对角线、树冠轮廓、曲线以及利用描边和填充样式。介绍了beginPath、moveTo、lineTo、closePath等关键函数，并展示了如何应用变换进行平移、缩放和旋转。同时，讲解了lineCap属性用于定义线条末端样式，以及如何利用fillRect和strokeRect绘制矩形并进行填充。

摘要由CSDN通过智能技术生成

书接上文,原谅我写博客新手,并且还是这种总结性的文章.虽然是自己的学习笔记,但也不能这么潦草.这篇开始,好好排版,删掉废话.归纳总结为主.

首先,回顾一下.

页面中加入的canvas

  <canvas id="diag" style="border:1px solid" width="200" height="200"> 
  </canvas>

相应的绘制对角线的JS代码

function draw(){
  var canvas = document.getElementById('diag');
  var context = canvas.getContext('2d');
  
  context.beginPath();
  context.moveTo(70,140);
  context.lineTo(140,70);
  
  context.stroke();
}
window.addEventListener("load", draw, true);

所呈现的图像