Canvas

最新推荐文章于 2023-06-17 10:54:34 发布
最新推荐文章于 2023-06-17 10:54:34 发布
阅读量156 收藏
点赞数 1
分类专栏： HTML
原文链接：https://www.jianshu.com/p/acc73e32708d
版权

一、认识canvas

1、什么是canvas

canvas是html5的标签，可以用Javascript在html页面上绘制图形。

2、canvas可以做什么？

  • 绘图(图标，图形的绘制)
  • 数据的可视化(重点)
  • 动画与游戏
  • banner 广告
  • 多媒体、虚拟现实、图形编辑等

3、canvas基本使用

Canvas默认大小为300像素×150像素（宽×高，像素的单位是px），可以使用HTML的高度和宽度属性来自定义Canvas 的尺寸。

注意：Canvas是一个画布（图片），不要使用css样式进行宽高的设置，否则该画布将会被拉升变形

基本代码

<!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style>
      //通过设置边框样式可以在页面上看到画布的区域
         #c {
             border: 1px solid #000;
         }
     </style>
 </head>
 <body>
 <!-- 准备一个canvas标签，使用行内样式设置画布的大小-->
 <canvas id="c" width="600", height="300"></canvas>
 <script>
     //1. 准备画布（Javascript获取html页面元素进行操控）
     var canvas = document.querySelector("#c");
     //2. 生成画图工具
     var ctx = canvas.getContext("2d");
     //3. 开始画线
     //注意，画图工具会先生成图形路径（就像当于生成玻璃纸）
     //3.1先将画笔移动到起始坐标点
     ctx.moveTo(0, 150);
     //3.2画一条水平直线
     ctx.lineTo(600, 150);
     //4. 线条颜色填充，将玻璃纸复印到画布上
     ctx.stroke();
 </script>
 </body>
 </html>

效果：
在这里插入图片描述

4、canvas兼容性问题

只要浏览器支持此标签就可以生效，如果不支持，就会解析为div标签；

常常在 canvas 中嵌入文本, 以提示用户浏览器的能力

 var canvas = document.getElementById('tutorial');
 if (canvas.getContext){
     var ctx = canvas.getContext('2d');
     // 开始画图
 } else {
     // canvas不支持提示
 }

二、绘制形状

1、绘制直线

1、绘制步骤：

  • 获取canvas，画布
  • 生成ctx，画图工具
  • ctx.moveTo(x, y): 将画笔移动到某个坐标点上
  • ctx.lineTo(x, y), 从画笔所在的点，移动到当前点，即画出一条直线
  • ctx.stroke(),给画的线设置颜色
//获取画布
var canvas = document.getElementById("canvas");
//生成画图工具
var context = canvas.getContext("2d");
//画两条线
context.moveTo(0, 52);
context.lineTo(600, 52);
context.moveTo(50, 0);
context.lineTo(50, 400);
context.strokeStyle = 'red';
context.stroke();

效果：
在这里插入图片描述

2、使用直线绘制其他图形

1、三角形

使用moveTo lineTo strokeStyle stroke() fillStyle fill()

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext("2d");
    //三角形
    context.moveTo(50, 50);
    context.lineTo(150, 50);
    context.lineTo(100, 100);
    context.lineTo(50,50);
    //设置描边颜色
    context.strokeStyle = 'green';
    //描边
    context.stroke();
    //设置填充颜色
    context.fillStyle = 'skyblue';
    //填充
    context.fill();
    //注意：可以同时设置描边和填充颜色

2、四边形

使用moveTo lineTo strokeStyle stroke() fillStyle fill()
beginPath() closePath()

    //在同一块画布上，为了避免描边或者填充时出现后设置的覆盖之前
    //的样式，使用context.beginPath()开启新的路径，相当于使用的
    //新的一块玻璃纸
    context.beginPath();
    context.moveTo(200, 50);
    context.lineTo(300,50);
    context.lineTo(300,150);
    context.lineTo(200,150);
    // context.lineTo(200,50);
    //闭合的图形，可以使用context.closePath()，这样会自动连接起始点，完成闭合
    context.closePath();
    context.strokeStyle = 'red';
    context.stroke();

在这里插入图片描述

3、绘制四边形的方式

1、使用直线绘制

//起始位置
context.moveTo(50, 50);
context.lineTo(150, 50);
context.lineTo(150, 150);
context.lineTo(50,150);
//使用context.closePath()封闭图形
context.closePath();
//描边
context.stroke();

2、直接绘制四边形

context.rect(x, y, w, h);
x为四边形左上角起点横坐标；
y为四边形左上角起点纵坐标；
w为四边形宽度；
h为四边形高度；

//context.rect(x, y, w, h);
//x为四边形左上角起点横坐标；y为四边形左上角起点纵坐标；
//w为四边形宽度；h为四边形高度；
context.rect(200, 50, 100, 100);
context.stroke();

3、直接绘制描边的四边形

context.strokeRect(x,y,w,h)中的参数与rect中的参数相同

//context.strokeRect(x,y,w,h)中的参数与rect中的参数相同
//设置描边样式
context.strokeStyle = 'red';
context.strokeRect(350, 50, 100, 100);

4、直接绘制填充的四边形

//context.fillRect(x,y,w,h)中的参数与rect中的参数相同
//设置填充样式
context.fillStyle ='skyblue';
context.fillRect(50, 200, 100, 100);

在这里插入图片描述

4、绘制圆弧、扇形和圆

1、圆弧

绘制圆弧context.arc(x, y, radius, startAngle, endAngle, anticlockwise)

  • x,y为圆心的横纵坐标
  • radius为半径
  • startAngle起始弧度
  • endAngle结束弧度
  • anticlockwise路径方向，默认值为false顺时针方向，true为逆时针方向
    
    context.arc(300, 200, 150, 0, 30/180*Math.PI);
    context.stroke();

在这里插入图片描述

2、扇形

    //圆弧
    context.arc(300, 200, 150, 0, 30/180*Math.PI);
    //指向圆心的直线
    context.lineTo(300, 200);
    //闭合图形
    context.closePath();
    context.stroke();

在这里插入图片描述

3、圆

    //圆弧的结束弧度到起始弧度的差值为2π则形成圆
    context.arc(300, 200, 150, 0, 2*Math.PI);
    context.stroke();

在这里插入图片描述

5、绘制图表

1、绘制折线图（直线的使用）

//模拟数据
var dataArr = [10,50,11,62,86];
//获取元素
var canvas = document.getElementById('canvas');
//生成工具
var context = canvas.getContext("2d");
//绘制坐标轴
context.moveTo(50, 50);
context.lineTo(50, 350);
context.lineTo(550, 350);
context.stroke();
//计算坐标
var xyArr = [];//创建新数组用于保存计算后的坐标值
for (var i = 0; i < dataArr.length; i++) {
    //x坐标
    var x = 50+i*(canvas.width-100)/(dataArr.length-1);
    //y坐标
    var y = canvas.height-50-(canvas.height-100)/100*dataArr[i];
    //每个数据的坐标值存在一个对象中
    var dataObj = {
        x:x,
        y:y
    };
    //将坐标对象放入新创建的数组中
    xyArr.push(dataObj);
};
//绘制折线
//于之前的坐标轴进行分割
context.beginPath();
//将画笔移动到第一个点的位置
context.moveTo(xyArr[0].x, xyArr[0].y);
//绘制后续的折线
for(var j = 1;j<xyArr.length;j++){
    context.lineTo(xyArr[j].x,xyArr[j].y);
}
// 描边
context.stroke();

在这里插入图片描述

2、绘制直方图（四边形的使用）

    //模拟数据 
    var dataArr = [47,45,87,87,18];
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext("2d");
    //绘制坐标系
    context.moveTo(50, 50);
    context.lineTo(50, 350);
    context.lineTo(550, 350);
    context.stroke();
    //于坐标系进行分隔
    context.beginPath();
    //计算坐标值
    //直方图宽度
    var width = 40;
    //间隔
    var gap = (canvas.width-100-width*dataArr.length)/(dataArr.length+1);
    for (var i = 0; i < dataArr.length; i++) {
        //计算每个数据的横坐标
        var x = 50+gap+i*(width+gap);
        //计算每个数据的高度
        var height = (canvas.height-100)/100*dataArr[i];
        //计算每个数据的纵坐标
        var y = canvas.height-50-height;
        //绘制四边形（带描边）
        context.strokeRect(x, y, width, height);
    }

在这里插入图片描述

3、绘制饼状图（圆弧的使用）

    //模拟数据
    var data = [
        {type:'程序员',count:800,color:'blue'},
        {type:'测试',count:500,color:'red'},
        {type:'设计师',count:450,color:'hotpink'},
        {type:'架构师',count:200,color:'orange'},
        {type:'产品',count:250,color:'green'},
        {type:'程序员鼓励师',count:400,color:'yellow'}
    ];
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext("2d");
    //计算总数
    var sum = 0;
    for (var i = 0; i < data.length; i++) {
        sum += data[i].count;
    }
    console.log(sum);
    //起始弧度
    var starRadian = 0;
    for (var j = 0; j < data.length; j++) {
        //计算占比
        var percent = data[j].count/sum;
        //计算弧度
        var radian = 2*Math.PI*percent;
        //逐个画扇形
        //避免出现填充覆盖问题
        context.beginPath();
        //绘制圆弧
        context.arc(300, 200, 150, starRadian, starRadian+radian);
        //绘制指向圆心的线
        context.lineTo(300, 200);
        //闭合图形，形成扇形
        context.closePath();
        //设置填充颜色
        context.fillStyle = data[j].color;
        //进行颜色填充
        context.fill();
        //起始弧度累加（下一个的开始是上一个的结束）
        starRadian +=radian;
    }

在这里插入图片描述

三、非零填充原则

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="600px" height="400px"></canvas>
<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    //绘制同心圆
    //控制最里面的圆实心空心，只需要设置同心圆的总数，奇数为实心，偶数为空心，详解见最底下
    for(var i=0;i<10;i++){
        //i%2用于设置绘制出的圆的路径方向，使得相邻的两个圆的路径方向相反，在填充的时候依据非零填充原则进行填充
        context.arc(300,200,10+i*15,0,2*Math.PI,i%2);
    }
    //设置填充颜色
    context.fillStyle = 'skyblue';
    //进行填充
    context.fill();
</script>
</body>
</html>

在这里插入图片描述

绘制出的图形为封闭的图形，在填充颜色时遵循“非零填充原则”；

非零填充原则：

1、在封闭图形的内部，任意一点向外发射一条射线，射线会与绘制的图形的路径有交点；

2、图形路径为顺时针记作+1，图形路径为逆时针的时候记作-1；

3、射线与路径的所有交点的和不为0时，则该点在填充区域内，会被填充；如果结果为0，则该点不在填充区域内，不会被填充；

详解：改变代码context.arc(300,200,10+i15,0,2Math.PI,i%2);中变为（i+1）%2是无用的，因为（i+1）%2只是设置顺时针或逆时针，当同心圆个数为偶数时，从最里面的圆射线到最外面圆交点为偶数，总和为0，最里面的圆总是空心；当同心圆个数为奇数时，最里面的圆总是实心；所以应该改变的是for循环里的i控制同心圆个数

丫呀nice
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Canvas绘制坐标系
DevOps海洋的渔夫@专栏
01-13 925
需求 如果需要绘画一个坐标系，那么该怎么画呢，示例如下： 从图中可以看出如果想要绘制一个坐标系，具体需要做以下步骤： 计算坐标系的原点坐标 计算坐标系x轴的最远坐标点以及对应三角形的坐标点 计算坐标系y轴的最远坐标点以及对应三角形的坐标点 上面是写出了大概的步骤，但是细节该怎么做呢？ 计算坐标系的原点坐标的思路 如果要计算坐标系的原点坐标，首先需要这两个基本要素。...
使用canvas根据坐标集合绘制坐标点 + 更改坐标轴 + 旋转y轴
bruno_mars_brother的博客
06-08 2145
使用canvas根据坐标集合绘制坐标点 + 更改坐标轴 + 旋转y轴
使用canvas画布实现矩形的绘制（保留上一个绘制的矩形）
最新发布
Billow_lamb的博客
06-17 1073
/ 每次绘制会清空画布。
微信小程序 component组件里添加canvas画布
Higashino_Keigo的博客
11-20 1939
官方文档canvas：https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html 调试基础库：2.9.3 一开始，我使用的是官方文档里的示例代码进行修改的，即 // js methods内 drawOn:function(){ var context = wx.createCanvas...
canvas绘制坐标系
qq_37805832的博客
03-17 2628
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>09-Canvas绘制坐标系</title> <style> *{ margin: 0; padding: 0; } canvas{ displ
canvas裁剪
06-23
canvas裁剪canvas裁剪canvas裁剪canvas裁剪canvas裁剪canvas裁剪
canvas截屏
04-19
h5canvas截屏，解决了截频模糊，图片缺失，位置不对一些问题
canvas教程
08-16
Canvas 教程 本资源提供了详细的 canvas 使用技巧和相关技术阐述，对于初涉 JavaScript 和 canvas 相关技术的朋友有极大地帮助。 canvas 是新的 HTML 元素，可以通过 Script（通常是 JavaScript）绘制图形，用于...
canvas鼠标绘制多边形
08-18
使用canvas 鼠标事件绘制多边形，鼠标按下事件，移动事件绘制，双击事件结束绘制。原生js，使用添加事件监听，移除事件监听方法来进行绘制开始和结束。简单小demo
使用canvas 制作的水杯.html
12-28
学习使用canvas 制作的水杯
【绘制】HTML5 Canvas绘制坐标轴（图文、示例）
苏一恒
08-30 6280
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门：https://github.com/827652549/CanvasStudy 介绍 使用Canvas绘制具有x，y轴的直角坐标轴，并在轴上绘制相应的刻度条。 演示 在线演示 代码教程 通过常量来计...
Canvas绘制坐标轴、折线图
zhuzhunvhai的博客
07-19 1949
canvas{ border: 1px solid saddlebrown; } var cvs=document.getElementByI...
Quartz画图函数笔记
zani的博客
09-19 228
转自:http://www.cocoachina.com/bbs/read.php?tid-75122.html   0  CGContextRef context = UIGraphicsGetCurrentContext(); 设置上下文1 CGContextMoveToPoint 开始画线2 CGContextAddLineToPoint 画直线4 CGContextAddEllipse...
2.canvas绘制网格以及坐标轴
Rui_cong的博客
11-24 2396
html代码： JS代码： var canvas = document.getElementById('canvas2'), context = canvas.getContext('2d'), axis_margin = 40, axis_origin = {x : axis_margin , y : canvas.heig
Rect rect = new Rect(0,0,500,200);
Helene
07-31 4393
Rect rect = new Rect(0,0,500,200); 定义一个 矩形区域
用canvas画飞机大战（一步步详解附带源代码,源码和素材上传到csdn,可以免费下载）
yf19990720的博客
07-20 6355
前端canvas飞机大战,文章里附带源码及步骤详解.源码及图片素材我也上传在csdn,需要的可以免费下载
canvas绘制网格(增加坐标)
qq_21058391的博客
09-06 6008
1.接着上篇文章，我打算给绘制的表格增加坐标，这样看起来比较方便 //绘制网格 function drawGrid(CANVAS_WIDTH,CANVAS_HEIGHT,GRID_WIDTH,GRID_HEIGHT){ var rows=parseInt(CANVAS_WIDTH/GRID_WIDTH); var cols=parseInt(CANVAS_HEIGHT/GRID_HE
Pygame：飞机大战7(详细解读)
Monster丶ZF的博客
02-17 7233
文章目录（一）完成给玩家三次游戏机会的功能1️⃣在屏幕右下角绘制玩家生命数2️⃣完成玩家复活后三秒真男人状态（二）绘制游戏结束画面1️⃣附上自己修改第一次游戏结束没有record.text文件报的文件不存在异常的解决方案2️⃣附上这个飞机大战项目的所有源码，加油！1️⃣子弹模块----bullet.py2️⃣敌机模块----enemy.py3️⃣玩家飞机模块----myplane.py4️⃣补给包...
canvas基本使用（获取画布、绘制矩形、清除屏幕内容、动画、绘制不规则图形、圆形、虚线、绘制文字、颜色渐变、设置阴影、渲染图片、变形偏移、canvas文档）
AIWWY的博客
06-05 3261
目录 canvas使用 获取画布 var canvas = document.getElementById(canvasID) vat ctx = canvas.getContext('2d') 绘制矩形 ctx.fillStyle = 'red' ctx.fillRect(100,100,200,50) ctx.strokeStyle = 'blue' ctx.strokeRect(300,100,200,50) 清除屏幕内容（动画） ctx.clearRect(0,0,600,60
canvas
06-01
使用 Canvas 可以在网页中实现动画效果、图表展示、图片处理等功能。Canvas 通过 JavaScript 代码来绘制图形，这意味着我们可以根据需要动态地生成图形，而不需要使用静态的图片。 Canvas 的使用非常灵活，可以在 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值