【HTML5】在canvas上绘制简单的2D图形 (+太极图)
canvas(画布)
canvas 元素是H5中新增的一个重要元素,专门用来绘制图形。在页面中放置一个canvas元素,就相当于在页面上放置一块画布,可以利用 canvas api 在其中进行图形的描绘。
<canvas id="app" height="300" width="400" style="background-color: #f5f5f5;"> </canvas>
<script>//获取canvas元素var app = document.querySelector("#app")//获取CanvasRenderingContext2D实例对象,利用该实例对象提供的方法进行图形绘制var context = app.getContext("2d");//绘制context.fillStyle = "pink"context.fillRect(0,0,100,100);
</script>
画布本身是一个标签,没有绘图功能,有绘图功能的是图形上下文,图形上下文是一个封装了很多绘图功能的对象。
当 getContext() 方法参数为 “2d” 的时候,获取到 2D上下文 。使用2D上下文提供的方法,可以绘制简单的2D图形,比如矩形,弧线和路径。2D上下文的坐标开始于canvas元素的左上角,原点坐标是(0,0)。
绘制图形步骤
<canvas id="canvas" width="400" height="400" style="border:2px solid #aaa"></canvas>
<script>window.onload=function(){//1、获取画布对象 var canvas = document.getElementById('canvas')//2、获取2D图形上下文var context = canvas.getContext('2d');//3、设置绘图样式context.fillStyle='pink'; //填充的样式context.strokeStyle='red'; //图形边框的样式 //4、指定线宽context.lineWidth=5; //5、绘制矩形(参数:起始点x,y坐标,宽度,高度)context.fillRect(100,100,200,200); //填充矩形context.strokeRect(0,0,100,100); //绘制矩形边框context.clearRect(150,150,50,50); //清除画布中的矩形框context.clearRect(200,200,50,50);}
</script>
需要注意的是,矩形是唯一一种可以直接在2d上下文中绘制的形状。
绘制路径–圆形
<canvas id="canvas" width="400" height="400"></canvas>
<script>window.onload=function(){var canvas = document.getElementById('canvas')var context = canvas.getContext('2d');//1、开始创建路径context.beginPath();//2、设置路径(参数:圆心x,y坐标,半径,开始角度,结束角度,绘制方向(true为逆时针,false为顺时针))// Math.PI ==> 180degcontext.arc(200, 200, 100, Math.PI / 180 * 0, Math.PI / 180 * 180, false);//3、关闭路径context.closePath();//4、设定绘制样式,进行图形绘制context.fillStyle='coral';context.fill() //填充图形context.strokeStyle='red';context.stroke() }
</script>
绘制路径–直线
<canvas height="400" width="400" id="canvas"></canvas>
<script>window.onload=function(){var canvas = document.getElementById('canvas')var context = canvas.getContext('2d');//楼梯状//直线的起点(参数:x,y坐标)context.moveTo(0, 0);//直线的终点context.lineTo(50, 0);context.lineTo(50, 50);context.lineTo(100, 50);context.lineTo(100, 100);context.strokeStyle='yellow';context.stroke();}
</script>
绘制渐变–线性 / 径性
绘制线性渐变时需要使用LinearGradient对象,通过2D上下文来创建和修改。
<canvas height="400" width="400" id="canvas"></canvas>
<script>window.onload=function(){var canvas = document.getElementById('canvas')var context = canvas.getContext('2d');//1、创建渐变对象(参数:起始点x,y坐标,结束点x,y坐标)var gradient = context.createLinearGradient(0, 200, 400, 200);//2、添加渐变颜色(参数:0-1之间的偏移量,颜色值)gradient.addColorStop(0, 'red');gradient.addColorStop(0.5, 'blue');gradient.addColorStop(1, 'yellow');//3、设置填充渐变context.fillStyle=gradient;//4、使用渐变绘制矩形context.fillRect(100,100,200,200);}
</script>
径向渐变是指沿着圆形的半径方向向外进行扩展的渐变方式,需要使用RadialGradient对象,通过2D上下文来创建:context.createRadialGradient()
,参数:起始圆的圆心x坐标,y坐标,半径,结束圆的圆心x坐标,y坐标,半径。
如果想从某个形状的中心点开始创建一个向外扩散的径向渐变的效果,就要将两个圆定义为同心圆。
绘制变形–平移 / 扩大 / 旋转
绘制图形的时候,我们可能经常会想要旋转图形,或者对图形进行变形处理,使用Canvas API的坐标轴变换处理功能,可以实现这种效果。
- context.translate(x,y)
参数:坐标原点在x轴、y轴方向移动的单位。 - context.scale(x,y)
参数:水平方向、垂直方向放大的倍数。如果是缩小,将这两个参数设为0到1之间的数就可以。 - rotate(angle)
参数:旋转的角度。旋转的中心点是坐标轴的原点,旋转是以顺时针方向进行的,要想逆时针旋 转时,将angle设定为负数即可。
绘制图像
在HTML5中,不仅可以使用Canvas API绘制图形,还可以读取磁盘或网络中的图像文件,然后使用Canvas API将该图像绘制在画布中。
<canvas height="400" width="400" id="canvas"></canvas>
<script>window.onload=function(){var canvas = document.getElementById('canvas')var context = canvas.getContext('2d');//创建图像对象var image = new Image()image.src='./image/photo.jpg'image.onload=function(){//绘制图像(参数:图像对象,绘制位置的起始x,y坐标,图像的宽,高)context.drawImage(image, 100, 100, 200, 200);} }
</script>
注意:当图像文件是一个来源于网络的比较大的图像文件时,用户就需要耐心等待图像全部装载完毕才能看到该图像,这种情况下可以使用image.onload
方法来解决。
- 图像平铺:createPattern(image,type)
type的取值可以为:repeat、repeat-x、repeat-y、no-repeat。
var pattern = createPattern(image,'repeat');
context.fillStyle = pattern;
context.fillRect(100, 100, 200, 200);
- 图像剪裁:context.clip()
context.beginPath();
context.arc(200, 200, 100, Math.PI / 180 * 0, Math.PI / 180 * 360);
context.closePath();
context.clip();
这个方法会把Canvas的当前路径裁剪下来,一旦调用了clip方法之后,接下来向Canvas绘制图形时,clip()裁剪的路径覆盖的部分才会被显示出来。
绘制文本
在HTML5中,可以在Canvas画布中进行文字的绘制,同时也可以指定绘制文字的字体大小,对齐方式,文字文理填充等。
<canvas height="400" width="400" id="canvas"></canvas>
<script>window.onload = function(){var canvas = document.getElementById('canvas')var context = canvas.getContext('2d');//设置文字字体context.font = 'italic 50px sans-serif';//设置文本基线context3.textBaseline = 'top';//设置文本对齐方式 context3.textAlign = 'start';//绘制填充文本(参数:文字、起点的x,y坐标、文本宽度)context.fillText('hello', 200, 200, 200); context.fillStyle='teal'; //文本填充//绘制勾勒文本context.strokeText('hello', 200, 200, 200); context.strokeStyle='pink'; //文本描边}
</script>
学完了canvas上绘制图形的基础知识,下面我们就来实际操作一下,绘制一个简单的太极图吧~
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>太极图</title><script>window.onload=function(){var canvas = document.getElementById('canvas')var context = canvas.getContext('2d');// 大圆context.beginPath()context.arc(200, 200, 200, Math.PI / 180 * 90, Math.PI / 180 * 270);context.closePath();context.fillStyle='black';context.fill()context.beginPath()context.arc(200, 200, 200, Math.PI /180* 270, Math.PI /180* 90);context.closePath();context.fillStyle='red';context.fill()//中圆context.beginPath()context.arc(200, 100, 100, Math.PI / 180 * 0, Math.PI / 180 * 360);context.closePath()context.fillStyle='black'context.fill()context.beginPath()context.arc(200, 300, 100, Math.PI / 180 * 0, Math.PI / 180 * 360);context.closePath()context.fillStyle='red'context.fill()//小圆context.beginPath()context.arc(200,100,20,Math.PI / 180 * 0, Math.PI / 180 * 360)context.closePath()context.fillStyle='red'context.fill()context.beginPath()context.arc(200,300,20,Math.PI / 180 * 0, Math.PI / 180 * 360)context.closePath()context.fillStyle='black'context.fill()}</script>
</head>
<body><canvas height="400" width="400" id="canvas"></canvas>
</body>
</html>
如果我们想让太极图转动起来,只需要给它添加动画样式就可以了:
<style>canvas{animation: move 1s linear infinite;}@keyframes move {from{transform: rotate(0deg);}to{transform: rotate(360deg);}}
</style>
是不是很简单呀~~大家都来试着绘制一下自己的图形吧!另外,如果有童鞋不了解动画样式怎么使用,可以看我之前的文章:HTML&CSS >> 动画,希望可以帮助到你~
【HTML5】在canvas上绘制简单的2D图形 (+太极图)相关推荐
- html5画布椭圆,在html5的Canvas上绘制椭圆的几种方法总结
概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结.各种方法各有优缺,视情况选用.各方法的参数相同: context为Canvas的2D绘图环境对象, x为椭圆中 ...
- 用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- 软件项目技术点(7)——在canvas上绘制自定义图形
AxeSlide软件项目梳理 canvas绘图系列知识点整理 图形种类 目前我们软件可以绘制出来的形状有如下这几种,作为开发者我们一直想支持用户可以拖拽的类似word里面图形库,但目前还没有找到比 ...
- 画出序列的图形matlab,江恩时间序列怎么画,如何在matlab上绘制基于时间序列的图形...
Q1:如何在matlab上绘制基于时间序列的图形 ..flag.. Q2:怎样用spss软件画出时间序列图 第一步:定义时间.步骤:数据-定义日期.有许多种日期模式,依实际情况定. 第二步:创建模型. ...
- 【MATLAB】基本绘图 ( 绘制多图 | 设置图形对话框在 Windows 界面的位置和大小 | 在一个图形上绘制多个小图形 )
文章目录 一.绘制多图 1.绘制多图 2.代码示例 二.设置图形对话框在 Windows 界面的位置和大小 三.在一个图形上绘制多个小图形 一.绘制多图 1.绘制多图 存在一种绘图情况 , 需要同时展 ...
- html5中Canvas、绘制线条模糊、常见绘制工具、绘制基本图形、绘制图片、面向对象的方式绘制图形图片、绘制文本、帧动画绘制
Canvas容器: canvas标签用来定义图像的容器,必须配合脚本来绘制图像,canvas也运用于游戏开发.注意:canvas绘制图时会出现线条模糊情况,这是因为显示屏像素和canvas中定义的一个 ...
- html5绘制五环,浅析HTML5的Canvas——案例绘制
1. Canvas绘制五环 //1.获取canvas和上下文 var canvas = document.getElementById('canvas'); var ctx = canvas.getC ...
- 矩形做成翻页的效果html5,HTML5 在canvas中绘制矩形附效果图
一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统,x坐标向右递增,y坐标向下递增. 使用绘图环境的矩形绘制函数来绘制矩形. fillRect(x,y,width,height) : 绘制 ...
- Android 如何将Canvas上绘制的内容保存成本地图片
效果如下图所示 保存在sd卡上的文件为 手机上显示效果为: 1>>在Manifest文件中增加相应权限 <!-- 在SDCard中创建与删除文件权限 --><uses-p ...
最新文章
- Hadoop集群的基本操作(三:HBase的基本操作)
- ubuntu16安装pylearn2 出现错误提示importerror:no module named six.moves
- Linux下查看系统配置
- 利用python进行数据分析论文_利用Python进行数据分析之pandas的高级用法
- Pycharm如何在控制台输出窗口中使用Python解释器
- yii 使用 有赞sdk_有赞ABTest系统:数据驱动增长实践
- django定时任务
- System.Web.HttpContext.Current.Session为NULL解决方法
- 【插件发布】JAVA微服务框架,Jeecg-P3-Biz-OA 1.0.0 插件开源发布
- 2021衢二中高考成绩查询入口,2021衢州市地区高考成绩排名查询,衢州市高考各高中成绩喜报榜单...
- python使用字典描述学生信息_Python字典(Dictionary)操作详解
- BP反向传播一文弄懂神经网络中的反向传播法
- DataTable数据集动态构造Table表结构
- 字符串 -- 将整数字符串转换为成整数值 -- 图解
- ubuntu 19.10 建立拨号连接(PPPoE)
- 灰色产业链成病毒传播最大渠道 流量生意或迎来最后的疯狂
- asp.net摄影网站系统VS开发sqlserver数据库web结构c#编程计算机网页源码项目
- java is as,as-is是什么意思
- 关于QQWry.dat格式
- 浅谈软件设计的七大原则
热门文章
- Apache RocketMQ 分享
- linux学习查看日志命令
- linux学习查看系统资源和磁盘分区
- 信息安全工程师考试大纲-科目1:信息安全基础知识
- 小汤学编程之JAVA基础day09——常用类(一):比较器、内部类和包装类
- 【BZOJ2251】[2010Beijing Wc]外星联络 后缀数组
- vijos 1071 01背包+输出路径
- java 23种设计模式(转载)
- 快速排序里的学问:从猜数字开始 猜数字里的算法思想
- cocos2dx 3.x 解决输入框(TextField,TextFieldTTF) 输入中文变乱码的问题