热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

html5canvas学习笔记

1.添加元素right:wrong:当没有设置宽度和高度的时候,canvas会初始化宽度为300像素和高度为150像素。该元素可以使用CSS来定义大小,但在绘制时图

1. 添加元素

right:

<canvas id="myCanvas" width="300" height="300">canvas> 

 wrong:

.myCanvas{width:300px;height:300px;}
<canvas id="myCanvas">canvas> 

当没有设置宽度和高度的时候,canvas会初始化宽度为300像素和高度为150像素。该元素可以使用CSS来定义大小,但在绘制时图像会伸缩以适应它的框架尺寸:如果CSS的尺寸与初始画布的比例不一致,它会出现扭曲。

元素创造了一个固定大小的画布,它公开了一个或多个渲染上下文,其可以用来绘制和处理要展示的内容。

2. 获取2D渲染上下文

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d"); 

 3. 开始绘制

画布坐标空间:

技术分享

所有api均由ctx来调用。

绘制矩形:

fillRect(x, y, width, height)
//绘制一个填充的矩形,默认填充颜色为黑色
strokeRect(x, y, width, height)
//绘制一个矩形的边框
clearRect(x, y, width, height)
//清除指定矩形区域,让清除部分完全透明

 HTML中的元素canvas只支持一种原生的图形绘制:矩形,绘制之后会马上显现在canvas上,即时生效。所有其他的图形的绘制都至少需要生成一条路径。

路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径,甚至一个子路径,都是闭合的。使用路径绘制图形需要一些额外的步骤。

  1. 首先,你需要创建路径起始点。
  2. 然后你使用画图命令去画出路径。
  3. 之后你把路径封闭。
  4. 一旦路径生成,你就能通过描边或填充路径区域来渲染图形。
beginPath()
//新建一条路径,生成之后,图形绘制命令被指向到路径上生成路径
moveTo(x, y)
//移动笔触,设置起点
closePath()
//闭合路径之后图形绘制命令又重新指向到上下文中,非必需。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的,什么也不做
stroke()
//通过线条来绘制出之前路径的图形轮廓,描边
fill()
//填充路径的内容区域,调用时没有闭合的形状都会自动闭合,所以不需要再调用closePath()

画图命令:

lineTo(x, y)
//绘制直线,从当前位置到(x, y)的位置
arc(x, y, radius, startAngle, endAngle, anticlockwise)
//绘制圆弧或者圆,(x,y)为圆心的以radius为半径的,从startAngle开始到endAngle结束,按照anticlockwise给定的方向(False = 顺时针,true = 逆时针, 默认为顺时针)来生成。

 注意起始角,结束角的大小定义如下图:

技术分享

如需通过 arc() 来创建圆,请把起始角设置为 0,结束角设置为 2*Math.PI。

绘制曲线:

quadraticCurveTo(cpx,cpy,x,y)
//二次贝尔赛曲线. 控制点(cpx, cpy),结束点(x, y)
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
//三次贝塞尔曲线, 第一个控制点(cp1x, cp1y),第二个控制点(cp2x, cp2y),结束点(x, y)

 如:

ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();

技术分享

ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();

技术分享

连续绘制贝塞尔曲线,可以从简单图形如气泡,心形等形成更复杂的图形,。

图形上色:

strokeStyle = color
//设置图形轮廓的颜色
fillStyle = color
//设置图形的填充颜色
//color可以为"orange","#FFA500","rgb(255,165,0)","rgba(255,165,0,0.5)"--带透明度的颜色

 一旦设置了 strokeStyle 或者 fillStyle 的值,那么这个新值就会成为新绘制的图形的默认值。如果要给每个图形上不同的颜色,需要重新设置 fillStyle 或 strokeStyle 的值。

设置全局透明度:

globalAlpha = transparencyValue
//有效的值范围是 0.0 (完全透明)到 1.0(完全不透明),默认是 1.0。

 线型:

lineWidth = value
//设置线条宽度
lineCap = type
设置线条末端样式,type包括butt(默认),round,square
lineJoin = type
设定线条与线条间接合处的样式,type包括miter(默认),round,bevel
miterLimit = value
限制当两条线相交时交接处最大长度;所谓交接处长度(斜接长度)是指线条拐角处内角顶点到外角顶点的长度。
 

渐变颜色:

阴影:

文本绘制:

图片编辑:

动画:

canvas优化:

来自Canvas的基本用法 , HTML 5 Canvas 参考手册

html5--canvas学习笔记


推荐阅读
  • 探索OpenWrt中的LuCI框架
    本文深入探讨了OpenWrt系统中轻量级HTTP服务器uhttpd的工作原理及其配置,重点介绍了LuCI界面的实现机制。 ... [详细]
  • LoadRunner中的IP欺骗配置与实践
    为了确保服务器能够有效地区分不同的用户请求,避免多人使用同一IP地址造成的访问限制,可以通过配置IP欺骗来解决这一问题。本文将详细介绍IP欺骗的工作原理及其在LoadRunner中的具体配置步骤。 ... [详细]
  • 本文详细介绍了PHP中的几种超全局变量,包括$GLOBAL、$_SERVER、$_POST、$_GET等,并探讨了AJAX的工作原理及其优缺点。通过具体示例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • 使用 ModelAttribute 实现页面数据自动填充
    本文介绍了如何利用 Spring MVC 中的 ModelAttribute 注解,在页面跳转后自动填充表单数据。主要探讨了两种实现方法及其背后的原理。 ... [详细]
  • Docker基础入门与环境配置指南
    本文介绍了Docker——一款用Go语言编写的开源应用程序容器引擎。通过Docker,用户能够将应用及其依赖打包进容器内,实现高效、轻量级的虚拟化。容器之间采用沙箱机制,确保彼此隔离且资源消耗低。 ... [详细]
  • selenium通过JS语法操作页面元素
    做过web测试的小伙伴们都知道,web元素现在很多是JS写的,那么既然是JS写的,可以通过JS语言去操作页面,来帮助我们操作一些selenium不能覆盖的功能。问题来了我们能否通过 ... [详细]
  • egg实现登录鉴权(七):权限管理
    权限管理包含三部分:访问页面的权限,操作功能的权限和获取数据权限。页面权限:登录用户所属角色的可访问页面的权限功能权限:登录用户所属角色的可访问页面的操作权限数据权限:登录用户所属 ... [详细]
  • 本文介绍如何使用 Python 计算两个时间戳之间的时间差,并将其转换为毫秒。示例代码展示了如何通过 `time` 和 `datetime` 模块实现这一功能。 ... [详细]
  • 使用REM和媒体查询实现响应式布局
    本文介绍如何利用REM单位和媒体查询(Media Queries)来创建适应不同屏幕尺寸的网页布局。通过具体示例,展示在不同屏幕宽度下如何调整页面元素的样式。 ... [详细]
  • SPFA算法详解与应用
    当图中包含负权边时,传统的最短路径算法如Dijkstra不再适用,而Bellman-Ford算法虽然能解决问题,但其时间复杂度过高。SPFA算法作为一种改进的Bellman-Ford算法,能够在多数情况下提供更高效的解决方案。本文将详细介绍SPFA算法的原理、实现步骤及其应用场景。 ... [详细]
  • 本文详细对比了HashMap和HashTable在多线程环境下的安全性、对null值的支持、性能表现以及方法同步等方面的特点,帮助开发者根据具体需求选择合适的数据结构。 ... [详细]
  • 神策数据分析基础
    本文介绍了基于用户行为的数据分析方法,包括业务问题的提出与定义、具体行为的识别及统计分析流程。同时,详细阐述了如何利用事件模型(Event Model)来描述用户行为,以及在实际应用中的案例分析。 ... [详细]
  • 本文列举了构建和运行 Struts2 应用程序所需的核心 JAR 文件,包括文件上传、日志记录、模板引擎等关键组件。 ... [详细]
  • 本文介绍了一个来自AIZU ONLINE JUDGE平台的问题,即清洁机器人2.0。该问题来源于某次编程竞赛,涉及复杂的算法逻辑与实现技巧。 ... [详细]
  • 本文探讨了线性表中元素的删除方法,包括顺序表和链表的不同实现策略,以及这些策略在实际应用中的性能分析。 ... [详细]
author-avatar
小辣椒jie
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有