canvas--总结一
一、什么是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--总结一的更多相关文章
- html5 canvas常用api总结(三)--图像变换API
canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...
- 【探索】利用 canvas 实现数据压缩
前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
- 获取Canvas当前坐标系矩阵
前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...
- Canvas坐标系转换
默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...
- Canvas绘图之平移translate、旋转rotate、缩放scale
画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...
- 用html5的canvas和JavaScript创建一个绘图程序
本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...
- html5标签canvas函数drawImage使用方法
html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...
- 使用 JavaScript 和 canvas 做精确的像素碰撞检测
原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...
- H5项目开发分享——用Canvas合成文字
以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...
随机推荐
- day7(redis的pipline使用)
1.pipeline原理 redis基本语法:https://www.cnblogs.com/xiaonq/p/7919111.html redis四篇:https://www.cnblogs.com ...
- day5(图片验证码接口)
1.django缓存设置 django的六种缓存(mysql+redis) :https://www.cnblogs.com/xiaonq/p/7978402.html#i6 1.1安装Django缓 ...
- Docker实战 | 第三篇:Docker安装Nginx,实现基于vue-element-admin框架构建的项目线上部署
一. 前言 在上一文中 点击跳转 通过IDEA集成Docker插件实现微服务的一键部署,但 youlai-mall 是前后端分离的项目,除了后端微服务的部署之外,当然还少不了前端工程的部署.所以本篇讲 ...
- NFS服务配置总结
目录 介绍 原理 适用场景 安装 NFS服务端 NFS客户端 配置 服务端配置 客户端配置 介绍 NFS就是Network File System的缩写,它最大的功能就是可以通过网络,让不同的机器.不 ...
- 第11.1节 Python正则表达式概述
正则表达式是可匹配文本片段的模式,一个正则表达式指定了一个与之匹配的字符串集合.最简单的正则表达式为普通字符串,与它自己匹配.如正则表达式'python'与字符串'python'匹配.通过匹配,可以在 ...
- 第11.27节 Python正则小结:正则静,静则明,明则虚,虚则无为而无不为也
正则表达式的章节到此就结束了,老猿现在觉得对我们这些身具程序猿基因特色的人来说,正则表达式应该是蛮可口的开胃小菜. 在写标题时,本来想写"正则表达式小结",后来想了想,百度了一下, ...
- 第七章、PyQt图形界面应用程序的事件捕获方法
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一. 概述 PyQt的图形界面应用中,事件处理类似于Windows系统的消息处理.一个带图形界面的应 ...
- 利用神经网络算法的C#手写数字识别(一)
利用神经网络算法的C#手写数字识别 转发来自云加社区,用于学习机器学习与神经网络 欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 下载Demo - 2.77 MB (原始地址):handwri ...
- react项目中的一些配置
react中事件优化使用babel插件 npm install babel-plugin-react-scope-binding --save-dev react中绝对路径引入文件:在根目录下增加js ...
- 【Jenkins】环境配置及安装
下载地址: 国外官网:https://www.jenkins.io/zh/download/(版本最新) 国内镜像:http://mirrors.jenkins-ci.org/windows/ 清华镜 ...