HTML5canvas元素概念及使用方法介绍

时间2024-01-26 19:35:03发布访客分类HTML浏览626

导读：收集整理的这篇文章主要介绍了html5教程-HTML5canvas元素概念及使用方法介绍，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。一. ca...

收集整理的这篇文章主要介绍了html5教程-HTML5canvas元素概念及使用方法介绍，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

一. canvas简介

??canvas是htML5新增的元素，主要用于图形的绘制。canvas本身没有绘图能力，一切都是通过javascript来完成的。

二. canvas使用

在html中添加canvas元素，定义canvas元素的高宽

在javascript代码中获取canvas元素对象

 VAR canvas = document.getElementById("canv");

调用该对象的getContext(“2d”)方法获取上下文

 var context = canvas.getContext("2d");

使用上下文对象在canvas上绘制图形。绘制图形的方法在下一部分介绍

三. 绘制图形的方法

绘制直线

 context.moveTo(x, y);
        // 定义直线的起点 context.lineto(x, y);
         // 定义直线的终点 context.stroke();
       // 绘制直线

绘制扇形（圆也可以认为是扇形）

 context.arc(originX, originY, r, startRad, stoPRad);
       // 定义扇形（包括圆心坐标，半径以及开始绘制和结束绘制的弧度） context.stroke();
          // 绘制扇形

绘制矩形

 context.fillRect(x, y, width, height);
         // 绘制矩形,(x,y)表示矩形左上角顶点的坐标

绘制文本

 context.fillText(text, x, y);
         // 绘制文本,(x, y)表示文本左下角的坐标

绘制图像

 var img = document.getElementById("testImage");
        // 获取图像元素对象 context.drawImage(img, x, y);
        // 绘制图像，(x, y)表示图像左上角坐标

四. 上下文对象的属性

fillStyle
?用来定义绘制样式。可以在绘制直线，扇形，矩形和文本时使用。取值可以时颜色，渐变或图案，默认是颜色#000000。

 context.fillStyle = "red";
         // 设置绘制样式为红色 context.fillRect(x, y, width, height);
         // 此时矩形是红色的

??? fillStyle的取值可以是渐变。创建渐变的代码如下：

 var grd = context.createLineargradient(x, y, x1, y1);
      // 创建线性渐变 grd.addColorStop(0, "red");
          // 设置渐变起始颜色为红色 grd.addColorStop(0, "blue");
          // 设置渐变结束颜色为蓝色  var grd = context.createRadialGradient(x, y, r, x1, y1, r1);
      // 创建径向渐变 grd.addColorStop(0, "red");
          // 设置渐变起始颜色为红色 grd.addColorStop(0, "blue");
          // 设置渐变结束颜色为蓝色

font
? 用来定义绘制文本时的使用字体。

 context.font = "幼圆";
        // 使用幼圆字体 context.fillText(text, x, y);
          // 使用幼圆字体绘制文本