canvas绘制图形API(一）

最新推荐文章于 2021-10-14 19:38:42 发布

pxy_Shineyo

最新推荐文章于 2021-10-14 19:38:42 发布

阅读量1.1k

点赞数 1

分类专栏： HTML 5 文章标签： html5 canvas 绘制图形图形API

本文链接：https://blog.csdn.net/PXYStyle/article/details/50801144

版权

本文介绍了HTML5的canvas元素，用于在网页上绘制图形。从canvas的基本使用、绘制矩形、圆形，到线条操作、渐变效果以及图形的坐标变换和矩阵变换，详细讲解了canvas的多种绘制方法和技巧，帮助开发者掌握canvas图形API。

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

canvas元素的基础知识

canvas元素是HTML5中的一个新增的重要元素，专门用来绘制图形。在页面上放置一个canvas元素，就相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘。但是，在canvas元素中进行绘画，并不是拿鼠标来作画。事实上，canvas元素只是一块无色透明的区域，需要利用JavaScript编写在其中进行绘画的脚本。

1. 用canvas元素基本知识

1）取得canvas元素：使用document.getElementById等方法取得canvas对象。

2）取得上下文（context):使用canvas对象的getContext方法来获得。

3）填充与绘制边框：结合使用fill和stroke方式绘制图形。

4）设定绘图样式（style)

fillStyle:填充的样式，填入颜色值

strokeStyle：图形边框的样式，填入颜色值。

5）指定线宽：lineWidth

6)指定颜色值

7）绘制矩形

context.fillRect(x,y,width,height)
context.strokeRect(x,y,width,height)
x-横坐标，y-纵坐标，width-矩形宽带，height-矩形高度，坐标原点为canvas画布的最左上角。

2. 利用canvas绘制矩形

HTML代码:

<!DOCTYPE html>
  <head>
    <meta charset="UTF-8">
  <title>demo</title>
  <script src="demo.js"></script>
  </head>
<body onload="draw('canvas');">
<h1>canvas元素示例</h1>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

js代码:

function draw(id){
var canvas=document.getElementById(id);
if (canvas == null) {
    return false
}
var context= canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,300);
context.fillStyle="#D620E8";
context.strokeStyle="#2AC773";
context.lineWidth=1;
c