一、什么是Canvas?

HTML5的canvas元素使用JavaScript在网页上绘制图像;

画布是一个矩形区域,可以控制其每一像素;

canvas拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法

canvas的应用---主要是数据可视化

二、canvas的基础绘制体验

  • 创建canvas元素

在HTML5页面中添加canvas元素,规定元素的id,宽度和高度(默认宽高300*150):

<canvas width="600" height="400" ></canvas>
  • canvas坐标系

  • 通过JavaScript绘制
// 获取元素
var myCanvas=document.querySelector("canvas");
//获取绘图工具
var ctx=myCanvas.getContext("2d");
//设置绘图的起始位置
ctx.moveTo(x0,y0);
//设置绘图的路径
ctx.lineTo(endX,endY);
//描边
ctx.stroke();

三、canvas的基本使用

  • 图形的绘制

1-描边 stroke();

    /*画平行线*/
ctx.moveTo(100,100.5);
ctx.lineTo(300,100.5); ctx.moveTo(100,200);
ctx.lineTo(300,200); /*描边*/
ctx.stroke();

注意点:

1、线的问题

线条的默认宽度是1px,默认颜色为黑色

导致产生的问题:

对齐的点是线的中心位置  会把线分成两个0.5px 显示的是会不饱和增加宽度

解决方案:
前后移动0.5px

2-填充 fill();  

    /*1.绘制一个三角形*/
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
/*起始点和lineTo的结束点无法完全闭合缺角*/
/*使用canvas的自动闭合 */
//ctx.lineTo(100,100);
/*关闭路径*/
ctx.closePath();
//ctx.fill();

注意点:手动闭合:起始点和lineTo的结束点无法完全闭合缺角

使用canvas的自动闭合---ctx.closePath();

开启新的路径:cyx.beginPath();--需要绘制不同样式的路径时开启新路径,避免造成覆盖样式

填充规则:非零环绕--从你需要判断的填充区域拉一根线出去,和这根线会有若干条线与之相交,去看和它相交的轨迹;如果是顺时针相交加1,逆时针相交减1;将判断得出的数加起来,如果等于0则这个区域不填充,不等于0则填充。

  • 设置样式

画笔的状态:

lineWidth      线宽,默认1px;

lineCap         线末端类型:(butt默认)、round(圆头端)、square(平头端)

lineJoin         相交线的拐点: (miter 默认-尖头)、round(圆端)、bevel(平端)

strokeStyle    线的颜色

fillStyle         填充的颜色

setLineDash()    设置虚线 --参数为一个数组(数组是用来描述你的排列方式的)

getLineDash()    获取虚线宽度集合(获取虚线的排列方式 获取的是不重复的那一段的排列方式)

lineDashOffset  设置虚线的偏移量(负值向右偏移)

/*画线*/
ctx.moveTo(100,100.5);
ctx.lineTo(300,100.5);
/*[5,10] 数组是用来描述你的排列方式的*/
ctx.setLineDash([4,10,20]);
/*获取虚线的排列方式 获取的是不重复的那一段的排列方式*/
// console.log(ctx.getLineDash());
/*如果是正的值 往后偏移*/
/*如果是负的值 往前偏移*/
// ctx.lineDashOffset = -20;
ctx.stroke();

canvas--总结一的更多相关文章

  1. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  2. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  3. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  4. 获取Canvas当前坐标系矩阵

    前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...

  5. Canvas坐标系转换

    默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...

  6. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  7. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  8. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

  9. 使用 JavaScript 和 canvas 做精确的像素碰撞检测

    原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...

  10. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

随机推荐

  1. 在html页中添加视频的几种方式

    1.avi格式代码片断如下: <object id="video" width="400" height="200" border=& ...

  2. 第14.10节 Python中使用BeautifulSoup解析http报文:html标签相关属性的访问

    一. 引言 在<第14.8节 Python中使用BeautifulSoup加载HTML报文>中介绍使用BeautifulSoup的安装.导入和创建对象的过程,本节介绍导入后利用Beauti ...

  3. PyQt学习随笔:ListView控件获取当前选择项的方法

    通过currentIndex()可以获取listView控件的当前选择元素,如果选择了多个,则可以通过selectedIndexes()来获取选择的元素,不过这两个函数返回的是元素数据,而不是索引编号 ...

  4. windows cmd 链接远程mysql服务器

    我要链接的mysql 所在ip:192.168.0.110    用户名:root  密码:123 那么: 打开cmd 输入: mysql -h192.168.0.110 -uroot -p123 即 ...

  5. 《30天自制操作系统》软盘 -> VMware虚拟机

    书名叫做30天自制操作系统,按照学校课设答辩的时间来看,估计得把书名改成<一周自制操作系统>,太卷了哈哈哈 我们可以使用qemu来模拟物理机 make run第二天制作的操作系统 可以看到 ...

  6. jvm 模型

  7. EF 查询外键对应的实例

    EF 查询外键对应的实例   1. 查询时易遇到的情况: 能查询到外键值,但对应的外键实例为null. 解决方法: (1) 使用EF的include // 我的应用如下 // SampleResult ...

  8. P5785 [SDOI2012]任务安排

    本题解用于本蒟蒻加深算法印象,也欢迎大家阅读 本篇题解将分为四块,一步一步地讲解本题, Part 1: O(n^3) \(n^3\) 算法应该非常的显然,我们设 \(f_{i,j}\) 为到 \(i\ ...

  9. js基本数据类型--null和undefined的区别

    1. null类型 只有一个值null,逻辑上表示一个空对象的指针,如果要定义一个变量来保存对象,最好将该变量初始化为null,比如let a="",而不要let b这样,其实nu ...

  10. Pytest 学习(二十五)- 解决pytest参数化测试标题都一样问题

    前言 使用参数化测试化后,allure的报告如下显示: 源代码如下: # -*- coding: utf-8 -*- # @Time : 2020/12/13 17:27 # @Author : lo ...