H5之canvas基础

最新推荐文章于 2024-07-13 20:45:54 发布

前端&小蜗牛&后端

最新推荐文章于 2024-07-13 20:45:54 发布

阅读量366

点赞数

分类专栏：小蜗牛学前端

本文链接：https://blog.csdn.net/qq_39504042/article/details/88321420

版权

这篇博客介绍了HTML5 Canvas的基础用法，包括绘制路径、矩形、圆弧和文字。讲解了如何使用JavaScript在canvas上进行图像绘制，如设置线条颜色、渐变填充，以及绘制自定义折线图和圆弧的方法。同时，提到了非零填充规则和面向对象编程在canvas应用中的体现。

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

H5之canvas学习

canvas画布的作用： HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

绘制路径

画布的尺寸不应该在样式设置需要，利用内联的方式设置
起始moveTo()，结束LineTo(),描边stroke(),函数的运用， item对于线条的绘画主要是对点的确定是关键还可以利用strokeColor设置颜色
对于闭合分为手动闭合和自动闭合
手动闭合：将点都描绘出来，然后利用fill()进行填充
自动闭合：closePath();
填充规则：非零填充，利用非零填充可以实现颜色的不同实现
颜色的渐变可以利用填充时实现（线是由点构成）ctx.lineWidth =30;
ctx.moveTo(100,100);
for(var i=0;i<255;i++){
ctx.beginPath();
ctx.moveTo(100+i-1,100);
ctx.lineTo(100+i,100);
ctx.strokeStyle = ‘rgb(’+i+’,’+i+’,’+i+’)’;
ctx.stroke();
}

绘制矩形

Rect()用于绘制矩形，矩形需要计算中心点和四边点之间的关系，然后进行绘制
渐变矩形，利用下面一段代码可以实现渐变`var linearGradient = ctx.createLinearGradient(100,100,500,100);
linearGradient.addColorStop(0,‘pink’);
linearGradient.addColorStop(0.5,‘red’);
linearGradient.addColorStop(1,‘blue’);
ctx.fillStyle = linearGradient;
ctx.fillRect(100,100,400,100);

利用绘制线段的方法可以绘制一个属于自己的这折线图在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid #cccccc;
            /*不建议 在样式中设置尺寸*/
        }
    </style>
</head>
<body>
<!--1.准备画布 -->
<canvas width="600" height="400"></canvas>
<script>
   /*1.构造函数*/
   var LineChart = function (ctx) {
    /*获取绘图工具*/
    this.ctx = ctx  || document.querySelector('canvas').getContext('2d');
    /*画布的大小*/
    this.canvasWidth = this.ctx.canvas.width;
    this.canvasHeight = this.ctx.canvas.height;
    /*网格的大小*/
    this.gridSize = 10;
    /*坐标系的间距*/
    this.space = 20;
    /*坐标原点*/
    this.x0 = this.space;
    this.y0 = this.canvasHeight-this.space;
    /*箭头的大小*/
    this.arrowSize = 10;
    /*绘制点*/
    this.dottedSize = 6;
    /*点的坐标 和数据有关系 数据可视化*/

   }
   /*2.行为方法*/
   LineChart.prototype.init =function (data) {
       this.drawGrid();
       this.drawAxis();

最低0.47元/天解锁文章

前端&小蜗牛&后端

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
H5之canvas基础

H5之canvas学习canvas画布的作用： HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。绘制路径画布的尺寸不应该在样式设置需要，利用内联的方式设置起始moveTo()，结束LineTo(),描边stroke(),函数的运用， ...
复制链接

扫一扫

专栏目录