热门标签 | 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学习笔记


推荐阅读
  • 使用Jsoup解析并遍历HTML文档时,该库能够高效地生成一个清晰、规范的解析树,即使源HTML文档存在格式问题。Jsoup具备强大的容错能力,能够处理多种异常情况,如未闭合的标签等,确保解析结果的准确性和完整性。 ... [详细]
  • 自动验证时页面显示问题的解决方法
    在使用自动验证功能时,页面未能正确显示错误信息。通过使用 `dump($info->getError())` 可以帮助诊断和解决问题。 ... [详细]
  • 本文详细介绍了如何解决DNS服务器配置转发无法解析的问题,包括编辑主配置文件和重启域名服务的具体步骤。 ... [详细]
  • 数字资产量化交易通过大数据分析,以客观的方式制定交易决策,有效减少人为的主观判断和情绪影响。本文介绍了几种常见的数字资产量化交易策略,包括搬砖套利和趋势交易,并探讨了量化交易软件的开发前景。 ... [详细]
  • 自定义滚动条美化页面内容
    当页面内容超出显示范围时,为了提升用户体验和页面美观,通常会添加滚动条。如果默认的浏览器滚动条无法满足设计需求,我们可以自定义一个符合要求的滚动条。本文将详细介绍自定义滚动条的实现过程。 ... [详细]
  • 两个条件,组合控制#if($query_string~*modviewthread&t(&extra(.*)))?$)#{#set$itid$1;#rewrite^ ... [详细]
  • 本文详细介绍了DMA控制器如何通过映射表处理来自外设的请求,包括映射表的设计和实现方法。 ... [详细]
  • 解决Win10下MySQL连接问题:Navicat 2003无法连接到本地MySQL服务器(10061)
    本文介绍如何在Windows 10环境下解决Navicat 2003无法连接到本地MySQL服务器的问题,包括启动MySQL服务和检查配置文件的方法。 ... [详细]
  • 本文详细介绍了如何利用Duilib界面库开发窗体动画效果,包括基本思路和技术细节。这些方法不仅适用于Duilib,还可以扩展到其他类似的界面开发工具。 ... [详细]
  • Spark中使用map或flatMap将DataSet[A]转换为DataSet[B]时Schema变为Binary的问题及解决方案
    本文探讨了在使用Spark的map或flatMap算子将一个数据集转换为另一个数据集时,遇到的Schema变为Binary的问题,并提供了详细的解决方案。 ... [详细]
  • 第二十五天接口、多态
    1.java是面向对象的语言。设计模式:接口接口类是从java里衍生出来的,不是python原生支持的主要用于继承里多继承抽象类是python原生支持的主要用于继承里的单继承但是接 ... [详细]
  • 解决Parallels Desktop错误15265的方法
    本文详细介绍了在使用Parallels Desktop时遇到错误15265的多种解决方案,包括检查网络连接、关闭代理服务器和修改主机文件等步骤。 ... [详细]
  • 解决 Windows Server 2016 网络连接问题
    本文详细介绍了如何解决 Windows Server 2016 在使用无线网络 (WLAN) 和有线网络 (以太网) 时遇到的连接问题。包括添加必要的功能和安装正确的驱动程序。 ... [详细]
  • CentOS 7 中 iptables 过滤表实例与 NAT 表应用详解
    在 CentOS 7 系统中,iptables 的过滤表和 NAT 表具有重要的应用价值。本文通过具体实例详细介绍了如何配置 iptables 的过滤表,包括编写脚本文件 `/usr/local/sbin/iptables.sh`,并使用 `iptables -F` 清空现有规则。此外,还深入探讨了 NAT 表的配置方法,帮助读者更好地理解和应用这些网络防火墙技术。 ... [详细]
  • 在使用Eclipse进行调试时,如果遇到未解析的断点(unresolved breakpoint)并显示“未加载符号表,请使用‘file’命令加载目标文件以进行调试”的错误提示,这通常是因为调试器未能正确加载符号表。解决此问题的方法是通过GDB的`file`命令手动加载目标文件,以便调试器能够识别和解析断点。具体操作为在GDB命令行中输入 `(gdb) file `。这一步骤确保了调试环境能够正确访问和解析程序中的符号信息,从而实现有效的调试。 ... [详细]
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社区 版权所有