canvas的基础入门
canvas是定义在浏览器上的画布。它不仅仅是一个标签元素更是一个编程工具是一套编程的接口。利用它可以开发出很多东西，比如动画，游戏，动态的图表等富有变现力和感染力的应用。还可以开发出绚丽的3D动态效果。接下来我们一起学习！
一、 创建canvas
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>canvas基础</title>
</head> <body>
<canvas id='canvas' width='700' height='400' style="border: 1px solid #aaa;display:block;margin:50px auto "></canvas>
</body> </html>
看一下现在的效果:
除了上述代码那样指定canvas的宽高，还可以在js中这样指定:
var canvas = document.getElementById('canvas');
canvas.width = 700;
canvas.height = 400;
这样边框内就是一个画布了，接下来我们就可以在这画布里进行绘制了。
二 、 画一条线段
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'); //获取canvas canvas.width = 700; //设定canvas的宽度
canvas.height = 400; //设定canvas的高度 if (canvas.getContext('2d')) { var context = canvas.getContext('2d'); //获取绘图的上下文环境 context.moveTo(100, 100) //画笔的起始位置
context.lineTo(500, 300) //画笔的结束位置
context.lineWidth = 5; //线的宽度
context.strokeStyle = '#005588' //线的颜色
context.stroke() //开始绘制 } else {
alert('您的浏览器不支持canvas,请更换浏览器尝试~')
}
}
</script>
看一下效果图:
三 、 画一个三角形并着色
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'); //获取canvas canvas.width = 700; //设定canvas的宽度
canvas.height = 400; //设定canvas的高度 if (canvas.getContext('2d')) { var context = canvas.getContext('2d'); //获取绘图的上下文环境 context.moveTo(100, 100) //画笔的起始位置
context.lineTo(500, 300) //画笔的结束位置
context.lineTo(100, 300) //画笔的结束位置
context.lineTo(100, 100) //画笔的结束位置 context.fillStyle='rgb(2,100,30)' //设置填充颜色
context.fill() //开始进行着色 context.lineWidth = 5; //线的宽度
context.strokeStyle = 'red' //线的颜色
context.stroke() //开始绘制 } else {
alert('您的浏览器不支持canvas,请更换浏览器尝试~')
}
}
</script>
效果图:
四 、 绘制两个图形
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'); //获取canvas canvas.width = 700; //设定canvas的宽度
canvas.height = 400; //设定canvas的高度 if (canvas.getContext('2d')) { var context = canvas.getContext('2d'); //获取绘图的上下文环境 context.beginPath() //开始一个新的路径绘制 context.moveTo(100, 100) //画笔的起始位置
context.lineTo(500, 300) //画笔的结束位置
context.lineTo(100, 300) //画笔的结束位置
context.lineTo(100, 100) //画笔的结束位置 context.closePath() //结束一个路径的绘制 context.fillStyle='rgb(2,100,30)' //设置填充颜色
context.fill() //开始进行着色 context.lineWidth = 5; //线的宽度
context.strokeStyle = 'red' //线的颜色
context.stroke() //开始绘制 context.beginPath() //开始一个新的路径绘制 context.moveTo(100,50) //画笔的起始位置
context.lineTo(600,300) //画笔的结束位置 context.closePath() //结束一个路径的绘制 context.lineWidth = 3; //线的宽度
context.strokeStyle = 'yellow' //线的颜色
context.stroke() //开始绘制 } else {
alert('您的浏览器不支持canvas,请更换浏览器尝试~')
}
}
</script>
效果图:
五 、 绘制一个七巧板
<script>
var tangram = [
{ p: [{ x: 0, y: 0 }, { x: 800, y: 0 }, { x: 400, y: 400 }], color: '#caff67' },
{ p: [{ x: 0, y: 0 }, { x: 400, y: 400 }, { x: 0, y: 800 }], color: '#67becf' },
{ p: [{ x: 800, y: 0 }, { x: 800, y: 400 }, { x: 600, y: 600 }, { x: 600, y: 200 }], color: '#ef3d61' },
{ p: [{ x: 600, y: 200 }, { x: 600, y: 600 }, { x: 400, y: 400 }], color: '#f9f51a' },
{ p: [{ x: 400, y: 400 }, { x: 600, y: 600 }, { x: 400, y: 800 }, { x: 200, y: 600 }], color: '#a594c0' },
{ p: [{ x: 200, y: 600 }, { x: 400, y: 800 }, { x: 0, y: 800 }], color: '#fa8ecc' },
{ p: [{ x: 800, y: 400 }, { x: 800, y: 800 }, { x: 400, y: 800 }], color: '#f6ca29' },
]
window.onload = function () {
var canvas = document.getElementById('canvas'); //获取canvas canvas.width = 800; //设定canvas的宽度
canvas.height = 800; //设定canvas的高度 if (canvas.getContext('2d')) { var context = canvas.getContext('2d'); //获取绘图的上下文环境 for (var i = 0; i < tangram.length; i++) {
draw(tangram[i], context)
} } else {
alert('您的浏览器不支持canvas,请更换浏览器尝试~')
}
} function draw(piece, context) {
context.beginPath();
context.moveTo(piece.p[0].x, piece.p[0].y);
for (var i = 1; i < piece.p.length; i++) {
context.lineTo(piece.p[i].x, piece.p[i].y)
}
context.closePath(); context.fillStyle = piece.color;
context.fill(); context.strokeStyle = 'black';
context.lineWidth = 3;
context.stroke(); }
</script>
效果图:
六 、 绘制一段弧
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'); //获取canvas canvas.width = 600; //设定canvas的宽度
canvas.height = 600; //设定canvas的高度 if (canvas.getContext('2d')) { var context = canvas.getContext('2d'); //获取绘图的上下文环境 context.lineWidth = 5;
context.strokeStyle = '#005588';
context.arc(300, 300, 200, 0, 1.5 * Math.PI);
context.stroke(); } else {
alert('您的浏览器不支持canvas,请更换浏览器尝试~')
}
}
</script>
context.arc各参数的含义:
context.arc(
centerx , //圆心的x轴坐标位置
centery, //圆心的y轴坐标位置
radius, //圆弧半径的值
startingAngle, //以哪个弧度制开始
endingAngle, //在哪个弧度制结束
anticlockwise=false //顺时针方向绘制,为true则逆时针。默认为顺时针。
)
效果图:
改为逆时针的话，在context.arc里面添加参数true
context.arc(300, 300, 200, 0, 1.5 * Math.PI,true);
效果图:
七 、 绘制多段弧 和 着色
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'); //获取canvas canvas.width = 1000; //设定canvas的宽度
canvas.height = 600; //设定canvas的高度 if (canvas.getContext('2d')) { var context = canvas.getContext('2d'); //获取绘图的上下文环境 context.lineWidth = 5;
context.strokeStyle = '#005588'; for (var i = 0; i < 10; i++) {
context.beginPath();
context.arc(50 + i * 100, 100, 40, 0, 2 * Math.PI * (i + 1) / 10);
context.closePath();
context.stroke();
} for (var i = 0; i < 10; i++) {
context.beginPath();
context.arc(50 + i * 100, 300, 40, 0, 2 * Math.PI * (i + 1) / 10);
context.stroke();
} context.fillStyle = '#005588'
for (var i = 0; i < 10; i++) {
context.beginPath()
context.arc(50 + i * 100, 500, 40, 0, 2 * Math.PI * (i + 1) / 10);
context.closePath() context.fill()
} } else {
alert('您的浏览器不支持canvas,请更换浏览器尝试~')
}
}
</script>
效果图:
可以看出绘制多个弧也是使用beginPath()和closePath()。但是绘制出来的弧自动的把首尾连接起来了，成了一个封闭的弧。这是因为closePath()的原因，如果想只是展示不封闭的弧，只需要把context.closePath()这段代码去掉就行。beginPath()和closePath()并不一定成对出现。填充的时候，有closePath()和没有closePath()效果是一样的。
canvas的基础入门的更多相关文章
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- osgEarth基础入门
osgEarth基础入门 2015年3月21日 16:19 osgEarth是基于三维引擎osg开发的三维数字地球引擎库,在osg基础上实现了瓦片调度插件,可选的四叉树调度插件,更多的地理数据加载插件 ...
- 从零基础入门JavaScript（1）
从零基础入门JavaScript(1) 1.1 Javascript的简史 1995年的时候 由网景公司开发的,当时的名字叫livescript 为了推广自己的livescript,搭了j ...
- osgEarth基础入门（转载）
osgEarth基础入门 osgEarth是基于三维引擎osg开发的三维数字地球引擎库,在osg基础上实现了瓦片调度插件,可选的四叉树调度插件,更多的地理数据加载插件(包括GDAL,ogr,WMS,T ...
- html5 基础入门
html5 基础入门 前言介绍 HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML工作团队. 如果从狭 ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- 「译」JUnit 5 系列：基础入门
原文地址:http://blog.codefx.org/libraries/junit-5-basics/ 原文日期:25, Feb, 2016 译文首发:Linesh 的博客:JUnit 5 系列: ...
- .NET正则表达式基础入门
这是我第一次写的博客,个人觉得十分不容易.以前看别人写的博客文字十分流畅,到自己来写却发现十分困难,还是感谢那些为技术而奉献自己力量的人吧. 本教程编写之前,博主阅读了<正则指引>这本入门 ...
- 从零3D基础入门XNA 4.0(2)——模型和BasicEffect
[题外话] 上一篇文章介绍了3D开发基础与XNA开发程序的整体结构,以及使用Model类的Draw方法将模型绘制到屏幕上.本文接着上一篇文章继续,介绍XNA中模型的结构.BasicEffect的使用以 ...
随机推荐
- 高级UI晋升之自定义View实战（六）
更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章将从Android 自定义属性动画&Camera动画来介绍自定义V ...
- Spring Boot实现通用的接口参数校验
Spring Boot实现通用的接口参数校验 Harries Blog™ 2018-05-10 2418 阅读 http ACE Spring App API https AOP apache IDE ...
- Python之lambda && reduce
lambda类似于C里面的#define或者C++里面的内联函数(inline),一般都小巧精悍 >>> g=lambda x,y:x*y >>> g(3,7) 2 ...
- 开启linux下面vsftp自身的服务
最近业务需求搞了一下sftp,配合samba感觉还是不错的. 上干货:笔者的环境是centos7.4 1.建立一个名为sftpusers的sftp用户组 groupadd sftpusers 2.建立 ...
- Linux使用yum install 安装程序时，提示“另外一个程序锁定了 yum；等待它退出……”
Linux使用yum install 安装程序时,提示“另外一个程序锁定了 yum:等待它退出……” 原因: yum命令一次只能安装一个软件,所以当你下载安装第二个软件包时,系统进程锁会锁定yum,这 ...
- 算法竞赛模板 AC自动机
AC自动机基本操作 (1) 在AC自动机中,我们首先将每一个模式串插入到Trie树中去,建立一棵Trie树,然后构建fail指针. (2) fail指针,是穿插在Trie树中各个结点之间的指针,顾名思 ...
- MNIST多图显示--Python练习
在学习TensorFlow框架时,提到用MNIST手写数字数据库进行练习,为了更直观看下里面的数据到底长啥样,用OpenCV(cv2)中的imshow函数来进行显示. 默认已经安装: numpy.te ...
- TCP 三次握手和四次挥手中的ACK 为什么总是SYN + 1 或者 FIN +1 而不是+ 其他数值？
TCP 三次握手的时候 1.客户端 向服务端发起连接请求,这个时候客户端将发送一个SYN分节(假设其值为J),它告诉服务端我发送数据的初始序列号将是J. 2.服务端收到这个请求后,必须确认(ACK) ...
- 前端学习(十二）js数据类型（笔记）
选项卡: for循环 for(初始值,条件,自增){} for(var i=0; i<9;i++){} 几个按钮对应相同个内容!!! -------------------- ...
- Angularjs书写规范
文件命名原则: 遵循以描述组件功能,然后是类型(可选)的方式来给所有的组件提供统一的命名 命名:feature.type.js. 测试文件名(feature.type.spec.js) 大多数文件都有 ...