Canvas如何绘制精美的图?
一.Canvas的基本使用
首先在使用Canvas一般先在<body>中添加:
<canvas id="Canvas" width="" height=""></canvas>
然后使用Js进行获取canvas和创建画笔:
<script>
var Canvas = document.getElementById("Canvas");
var pen = Canvas.getContext("2d");
</script>
继续将创建的画笔绘制一个圆:
<script>
var Canvas = document.getElementById("Canvas");
var pen = Canvas.getContext("2d");
pen.fillStyle = "#3648DA";
pen.beginPath()
pen.arc(,,,,*Math.PI);
pen.stroke()
</script>
二.JS&Canvas的相关属性
1.颜色、样式和阴影
fillStyle ------ 设置或返回用于填充绘画的颜色、渐变或模式。
fillRect()
<script>
var Canvas = document.getElementById("Canvas");
var pen = Canvas.getContext("2d");
pen.fillStyle = "#3648DA"; //设置填充颜色
pen.fillRect(,,,);
</script>
strokeStyle ------------ 设置或返回用于笔触的颜色、渐变或模式。
strokeRect()
<script>
var Canvas = document.getElementById("Canvas");
var pen = Canvas.getContext("2d");
pen.strokeStyle = "blue";
pen.fillRect(,,,);
</script>
shadowColor --------- 设置或返回用于阴影的颜色。
shadowBlur --------- 设置或返回用于阴影的模糊级别。
<script>
var Canvas = document.getElementById("Canvas");
var pen = Canvas.getContext("2d");
pen.shadowBlur = ; //模糊度
pen.shadowColor = "black"; //阴影颜色
pen.fillStyle="blue";
pen.fillRect(,,,);
</script>
shadowOffsetX -------- 设置或返回阴影与形状的水平距离。
shadowOffsetY -------- 设置或返回阴影与形状的垂直距离。
<script>
var Canvas = document.getElementById("Canvas");
var pen = Canvas.getContext("2d");
pen.shadowBlur = ;
pen.shadowColor = "black";
pen.shadowOffsetX=;
pen.shadowOffsetY=;
pen.fillStyle="blue";
pen.fillRect(,,,);
</script>
createLinearGradient() --------- 创建线性渐变（用在画布内容上）。
<script>
var c=document.getElementById("Canvas"); //获取画布
var ctx=c.getContext("2d"); //创建2d画笔 var grd=ctx.createLinearGradient(,,,); //创建线性渐变
grd.addColorStop(,"black"); //起始位置
grd.addColorStop(,"white"); //结束位置 ctx.fillStyle=grd;
ctx.fillRect(,,,);
</script>
createPattern(object,model) ------- 在指定的方向上重复指定的元素。
<script>
var c=document.getElementById("Canvas"); //获取画布
var ctx=c.getContext("2d"); //创建2d画笔
ctx.clearRect(,,,); //清除
var earth = document.getElementById("earth"); //获取
var pat=ctx.createPattern(earth,"repeat"); //创建模式
ctx.rect(,,,); //
ctx.fillStyle=pat; //填充
ctx.fill(); </script>
createRadialGradient ------ 创建放射状/环形的渐变（用在画布内容上）。
addColorStop() -------- 在指定的方向上重复指定的元素。
<script>
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d"); var grd = ctx.createLinearGradient(,,,,,);
grd.addColorStop(,"red");
grd.addColorStop(,"white");
ctx.fillStyle = grd;
ctx.fillRect(,,,);
</script>
2.线条样式
lineCap -------- 设置或返回线条的结束端点样式。
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d");
var grd = ctx.createLinearGradient(,,,,,);
ctx.beginPath();
ctx.lineWidth=10;
ctx.lineCap="round"; //线的结束线帽
ctx.moveTo(,);
ctx.lineTo(,);
ctx.stroke();
lineJoin --------- 设置或返回两条线相交时，所创建的拐角类型。
<script>
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d"); ctx.beginPath();
ctx.lineWidth =;
ctx.lineJoin="round";
ctx.moveTo(,);
ctx.lineTo(,);
ctx.lineTo(,);
ctx.stroke();
</script>
miterLimit ---------设置或返回最大斜接长度
<script>
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d"); ctx.lineWidth=;
ctx.lineJoin="miter";
ctx.miterLimit=;
ctx.moveTo(,);
ctx.lineTo(,);
ctx.lineTo(,);
ctx.stroke();
</script>
3.矩形
rect(x,y,width,height) ------- 创建矩形
<script>
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d"); ctx.rect(,,,);
ctx.stroke();
</script>
fillRect(x,y,w,h) ------- 绘制"被填充"的矩形。
<script>
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(,,,); </script>
strokeRect(x,y,w,h) --------- 绘制矩形（无填充）。
<script>
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d");
ctx.strokeRect(,,,) </script>
clearRect() ------- 在给定的矩形内清除指定的像素。
<script>
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(,,,);
ctx.clearRect(,,,);
</script>
4.路径
fill ------- 填充当前绘图（路径）。
<script>
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d");
ctx.rect(,,,);
ctx.fillStyle="red";
ctx.fill(); //当前路径填充
</script>
stroke() -------- 绘制已定义的路径。
<script>
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(,);
ctx.lineTo(,);
ctx.lineTo(,);
ctx.strokeStyle="red";
ctx.stroke();
</script>
beginPath() --------- 起始一条路径，或重置当前路径。
<script>
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.lineWidth="";
ctx.strokeStyle="green"; // Green path
ctx.moveTo(,);
ctx.lineTo(,);
ctx.stroke(); // Draw it ctx.beginPath();
ctx.strokeStyle="purple"; // Purple path
ctx.moveTo(,);
ctx.lineTo(,);
ctx.stroke(); // Draw it
</script>
moveTo() -------------- 把路径移动到画布中的指定点，不创建线条。
lineTo() -------------- 添加一个新点，然后在画布中创建从该点到最后指定点的线条。
<script>
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(,);
ctx.lineTo(,);
ctx.stroke();
</script>
clothPath() --------- 创建从当前点回到起始点的路径
<script>
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(,);
ctx.lineTo(,);
ctx.lineTo(,);
ctx.closePath();
ctx.stroke();
</script>
clip() ----- 从原始画布剪切任意形状和尺寸的区域。
<script>
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d");
// Clip a rectangular area
ctx.rect(,,,); //
ctx.stroke();
ctx.clip(); //用上面的框截取下面
// Draw red rectangle after clip()
ctx.fillStyle="red";
ctx.fillRect(,,,);
</script>
quadraticCurveTo() ---------- 创建二次贝塞尔曲线。
<script>
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d"); ctx.beginPath();
ctx.moveTo(,);
ctx.quadraticCurveTo(,,,);
ctx.stroke();
</script>
bezierCurveTo() ---------- 创建三次贝塞尔曲线。
<script>
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d"); ctx.beginPath();
ctx.moveTo(,);
ctx.bezierCurveTo(,,,,,); //贝塞尔
ctx.stroke();
</script>
arc() --------- 创建弧/曲线（用于创建圆形或部分圆）。
<script>
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d"); ctx.beginPath();
ctx.arc(,,,,*Math.PI);
ctx.stroke();
</script>
arcTo() -------- 创建两切线之间的弧/曲线。
<script>
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d"); ctx.beginPath();
ctx.moveTo(,); // 创建起始点
ctx.lineTo(,); // 创建水平线
ctx.arcTo(,,,,); // 创建弧
ctx.lineTo(,); // 创建垂直线
ctx.stroke(); // 画出来
</script>
isPointlnPath() -------- 如果指定的点位于当前路径中，则返回 true，否则返回 false。
<script>
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d");
ctx.rect(,,,);
if (ctx.isPointInPath(,)) //如果路径经过(20,50)为True
{
ctx.stroke(); //绘制
};
</script>
5.转换
scale(x,y) -------- 缩放当前绘图至更大或更小。 1--100% 0.5---50%
<script>
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d");
ctx.strokeRect(,,,);
ctx.scale(,);
ctx.strokeRect(,,,);
</script>
rotate() -------- 旋转当前绘图。
<script>
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d");
ctx.rotate(*Math.PI/);
ctx.fillRect(,,,);
</script>
translate(x,y) -------- 替换绘图的当前转换矩阵。
<script>
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(,,,);
ctx.translate(,);
ctx.fillRect(,,,);
</script>
setTransform ------ 将当前转换重置为单位矩阵。然后运行 transform()。
<script>
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(,,,) ctx.setTransform(,0.5,-0.5,,,);
ctx.fillStyle="red";
ctx.fillRect(,,,); ctx.setTransform(,0.5,-0.5,,,);
ctx.fillStyle="blue";
ctx.fillRect(,,,);
</script>
6.文本
7.图像绘制
8.像素操作
9.合成
10.其他
三.精美的Canvas案例
<script>var canvas = document.getElementById("Canvas");var ctx = canvas.getContext("2d");// Clip a rectangular areactx.rect(50,20,200,120);ctx.stroke();ctx.clip();// Draw red rectangle after clip()ctx.fillStyle="red";ctx.fillRect(0,0,150,100); </script>
Canvas如何绘制精美的图?的更多相关文章
- 使用 HTML5 canvas 绘制精美的图形
HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...
- HTML5 canvas 绘制精美的图形
HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...
- 如何从零绘制k线图 -- 原生js canvas图表绘制
样式如下图 源码地址: https://github.com/sutianbinde/charts 编写这个需要具备canvas基础,如果没有canvas基础可以学习我前面的cnavas基础博客. 具 ...
- 【带着canvas去流浪（5）】绘制K线图
目录 一. 任务说明 二. 重点提示 三. 示例代码 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文 ...
- 带着canvas去流浪系列之五 绘制K线图
[摘要] 用canvas原生API实现百度Echarts 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...
- Canvas上绘制几何图形
重要的类自定义View组件要重写View组件的onDraw(Canvase)方法,接下来是在该 Canvas上绘制大量的几何图形,点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形,等各种形状 ...
- 基于 HTML5 Canvas 的 3D 模型贴图问题
之前注意到的一个例子,但是一直没有沉下心来看这个例子到底有什么优点,总觉得就是一个 list 列表,也不知道右边的 3d 场景放两个节点是要干嘛,今天突然想起来就仔细地看了一下这个例子的代码,实际操作 ...
- openLayers 4 canvas图例绘制，canvas循环添加图片，解决图片闪烁问题
一.问题来源: 接触Openlayers 一段时间了,最近做了一个农业产业系统,项目中涉及到产业图例,最后考虑用canvas来绘制图例图像.当中带图片的图例移动时,图片会实现闪烁留白情况.闪烁是因为绘 ...
- canvas高效绘制10万图形,你必须知道的高效绘制技巧
最近的一个客户项目中,简化的需求是绘制按照行列绘制很多个圆圈.需求看起来不难,上手就可以做,写两个for循环. 原始绘制方法 首先定义了很多Circle对象,在遍历循环中调用该对象的draw方法.代码 ...
随机推荐
- 用户登录并返回token（springboot）
何为token?[如果想直接看代码可以往下翻] 使用基于 Token 的身份验证方法,在服务端不需要存储用户的登录记录.大概的流程是这样的:1. 客户端使用用户名跟密码请求登录2. 服务端收到请求,去 ...
- Day17-18前端学习之路——常用语句资料库
一.var 与 let 的区别 var: 可以先初始化再声明该变量; 可以根据需要多次声明相同名称的变量 var myName = 'Chris'; var myName = 'Bob'; let m ...
- js位运算-按位非
正数 取得二进制表示 取反(发现符号位是1,表示负数) 符号位不变,其余位取反 取反后加一 负数 取得负数的二进制表示(即绝对值的二进制反码加一) 取反即可
- MySQL数据库的备份、还原、迁移
一.单库备份与还原 1.远程连接MySQL数据库 D:\mysql-5.7.14-winx64\bin>mysql -h192.168.2.201 -uroot -pcnbi2018 参数说明: ...
- 【Java并发工具类】原子类
前言 为保证计数器中count=+1的原子性,我们在前面使用的都是synchronized互斥锁方案,加锁独占访问的方式未免太过霸道,于是我们来介绍另一种解决原子性问题的无锁方案:原子变量.在正式介绍 ...
- 【5min+】后台任务的积木。.NetCore中的IHostedService
系列介绍 [五分钟的dotnet]是一个利用您的碎片化时间来学习和丰富.net知识的博文系列.它所包含了.net体系中可能会涉及到的方方面面,比如C#的小细节,AspnetCore,微服务中的.net ...
- 06.JS对象-1
前言: 学习一门编程语言的基本步骤(01)了解背景知识(02)搭建开发环境(03)语法规范(04)常量和变量(05)数据类型(06)数据类型转换(07)运算符(08)逻辑结构(09)函数(10)对象1 ...
- 关于Redis缓存预热的思考
系统上线时,提前将相关的缓存数据直接加载到缓存系统.避免在用户请求的时候,先查询数据库,然后再将数据缓存的问题. 这里我考虑2个问题: A.哪些数据需要预热? B.如何预热? 关于问题A,根据不同的业 ...
- 802.11有线等效加密WEP
有线等效加密(WEP)标准是802.11无线安全早期的解决方案,WEP并不安全. 既然WEP并不安全,为什么还要学习WEP呢? WEP简单,相比后续出现的加密协议,它不要求有多么强大的计算能力.一些老 ...
- Linux 简介、目录结构
Linux是类 Unix 操作系统. 根据原生程度可分为: 内核版本 发行版本:一些公司.组织在内核版的基础上进行二次开发 根据市场需求可分为: 服务器版:没有好看的界面,在终端操作,类似于dos 桌 ...