canvas的基础使用。
目录:
创建canvas。
绘制直线、多边形和七巧板。
绘制弧和圆。
(有些图过于宽,被挤压了。可以去相册【canvas用到的图。】看原图。)
创建canvas。
HTML5的新标签<canvas></canvas>
在使用时会添加id,通过id来获取canvas元素来进行绘图操作。
<canvas id="canvas"></canvas>
可以添加样式。在不指定宽高的时候,默认是300px*150px。
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;"></canvas>
指定canvas大小是通过canvas标签的width属性和height属性,而不是通过CSS指定,并且指定时是没有单位的。
<canvas id="canvas" width="1024" height="768"></canvas>
使用JavaScript来获取canvas,通过getContext得到绘图的上下文环境。
var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); //使用context进行绘制
除了在标签内指定canvas的大小,还可以在JS中指定。
canvas.width=1024; canvas.height=768;
当浏览器不支持canvas时,可以使用以下两种方法。
<canvas>当前浏览器不支持canvas,请更换浏览器后再试。</canvas>
(当浏览器支持canvas时,canvas标签的内容会被浏览器忽略)
或者
var canvas = document.getElementById("canvas"); if(canvas.getContext("2d")){var context = canvas.getContext("2d"); }else{alert("当前浏览器不支持canvas,请更换浏览器后再试。") }
使用到的内容:
canvas.width
canvas.height
canvas.getContext()
绘制直线、多边形和七巧板。
context.moveTo(100,100); context.lineTo(200,200); context.stroke();
这三行代码就可以实现绘制一条直线。
moveTo,相当于把笔触放在坐标为100,100的位置。lineTo,就是从100,100画到200,200的位置。此时直线还没绘制出来,使用了context.stroke()方法才绘制出来。(这里的坐标是相对于<canvas>来说的。<canvas>的左上角为坐标原点。)
moveTo和lineTo都是绘制状态设置,而stroke()则是绘制。
除了moveTo,lineTo这两个状态设置。还有:
lineWidth。线条的宽度。
strokeStyle。线条样式(颜色),字符串的格式。
context.lineWidth = 5; context.strokeStyle = 'blue';
先写状态再写绘制。
绘制多条线段。只需要接上lineTo()就可以。
context.lineTo(100,200);
当最后的lineTo()的坐标和moveTo()的坐标一致,就可以实现首尾衔接的多边形。
context.lineTo(100,100);
矩形,梯形,五星形等的画法同理。
stroke()主要是绘制线条。
对多边形进行着色,状态:fillStyle,绘制方法:fill()
context.fillStyle = 'rgb(30,60,90)'; context.fill();
绘制路径并且着色:
var canvas = document.getElementById('canvas'); canvas.width = 300; canvas.height = 300; var context = canvas.getContext('2d'); context.moveTo(100,100); context.lineTo(200,200); context.lineTo(100,200); context.lineTo(100,100);context.fillStyle = 'rgb(30,60,90)'; context.fill();context.lineWidth = 5; context.strokeStyle = 'blue'; context.stroke();
当画第二个线段/多边形的时候,只需要重新调用moveTo()。
context.moveTo(200,100); context.lineTo(250,250); context.strokeStyle = 'red'; context.stroke();
问题:为什么两条线条颜色,粗细一样?
答案:canvas的绘制是基于状态的,在调用第二个线段的stroke()方法时,第一个线段的状态依然起作用,(既绘制了三角形又绘制了第二条线段),而第二个线段的strokeStyle覆盖了第一个线段的strokeStyle。
把两个线段的状态分开,方法:beginPath(),在定义路径前调用(moveTo()之前)。相应的,在路径定义完后,使用closePath()。
使用到的内容:
context.moveTo(x1,y1)
context.lineTo(x2,y2)
context.beginPath()
context.closePath()
context.lineWidth
context.strokeStyle
context.fillStyle
context.stroke()
context.fill()
绘制七巧板。
<canvas id="canvas" style="border:1px solid #aaa;display: block;margin: 50px auto;">当前浏览器不支持canvas,请更换浏览器后再试。 </canvas>
var tangram = [{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:'red'},{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:'orange'},{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:'yellow'},{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:'green'},{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:'lightblue'},{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:'blue'},{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:'purple'} ] window.onload = function(){var canvas = document.getElementById('canvas');canvas.width = 800;canvas.height = 800;var context = canvas.getContext('2d');for(var i=0;i<tangram.length;i++){draw(tangram[i],context);} }function draw( piece , ctx ){ctx.beginPath();ctx.moveTo(piece.p[0].x,piece.p[0].y);for(var i=1;i<piece.p.length;i++){ctx.lineTo(piece.p[i].x,piece.p[i].y);}ctx.closePath();ctx.fillStyle = piece.color;ctx.fill();ctx.strokeStyle = 'pink';ctx.lineWidth = 3;ctx.stroke(); }
绘制弧和圆。
context.arc(x,y,radius,startingAngle,endingAngle,anticlockwise=false)
绘制弧线。参数分别是,圆心的坐标x,y,圆的半径radius,开始的弧度值,结束的弧度值,顺时针转动/逆时针转动(false代表顺时针转动,true代表逆时针转动)。
弧度/角度。
无论顺时针/逆时针,弧度是不变的。
以下是顺时针的角度。
画3/4个圆。arc()也是状态设置。最后一个参数不填时,默认false,即顺时针。
context.lineWidth = 5; context.strokeStyle= 'blue'; context.arc(150,150,100,0,1.5*Math.PI); //圆心(150,150),半径100,从0弧度到1.5PI弧度。 context.stroke();
将最后一个参数设置为true时。
context.arc(150,150,100,0,1.5*Math.PI,true);
绘制多段弧。
context.lineWidth = 5; context.strokeStyle= 'blue'; for(var i=0;i<10;i++){context.beginPath();context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10); context.closePath();context.stroke(); }
问题:为什么弧的开始开始和结尾处被一条直线连接起来了?
答案:这是closePath()的另一个作用。当当前绘制的路径不是封闭路径时,使用了closePath()的话,就会自动将这段不封闭的路径在首尾处使用一条线连接。
以上代码不使用closePath()就不会首尾相连:
使用closePath(),并且逆时针方向绘制:
不使用closePath(),并且逆时针方向绘制:
填充处理。strokeStyle改为fillStyle。stroke()改为fill()。并且closePath()的效果:
去掉closePath():
注意:closePath()对于fill()来说是不起作用的。当调用fill()时,无论你是否调用closePath(),会自动将不封闭的内容首尾相连再填充。
使用到的内容:
context.arc(x,y,radius,startingAngle,endingAngle,anticlockwise=false)
转载于:https://www.cnblogs.com/hiuman/p/6016720.html
canvas的基础使用。相关推荐
- html5 canvas 画布基础
canvas 画布基础 学习整理的笔记,内容丰富 有绘制矩形,绘制线条,绘制二次贝塞尔曲线,绘制弧线等.知识点在代码注释中 效果图: 代码: <!DOCTYPE html> <htm ...
- java名片合成_HTML5 canvas绘图基础(电子名片生成器源码)
创建canvas 您的浏览器不支持canvas 基础设置 var canvas = document.getElementById('myCanvas');var ctx = canvas.getCo ...
- Android中Canvas绘图基础详解(附源码下载)
看到了一篇比较详细的Canvas文章,转过来方便自己查看. 源地址:http://blog.csdn.net/iispring/article/details/49770651 Android中,如果 ...
- android Canvas 最基础知识总结
学习Canvas 要先学习view 知识,这样才好学习 第一步 创建一个方法 让它继承 View 如下图 然后快捷键ait+/ 生成构造方法, 用来初始化View ,比如自定一个一些init()方法, ...
- Canvas动画基础之碰撞检测
在Canvas中进行碰撞检测,大家往往直接采用游戏引擎(Cocos2d-JS.Egret)或物理引擎(Box2D)内置的碰撞检测功能,好奇的你有思考过它们的内部运行机制吗?下面将针对基本的碰撞检测技术 ...
- Canvas绘图基础(一)
简单图形绘制 矩形:描边与填充 Canvas的API提供了三个方法,分别用于矩形的清除.描边及填充 clearRect(double x, double y, double w, double h) ...
- HTML5制作坦克大战游戏+Canvas绘制基础图形——学习笔记一
1.离线存储:1)存储到本地,可以离线浏览网页 2)不用cookie(安全性不太高,来回交互的数据量比较大) 2.语音识别 3.图像识别 4.HTML5游戏 5.CSS3的强大之处:动画和各种选择器 ...
- Canvas学习笔记 Canvas的基础知识点
文章目录 前言 一.导航 初始化 属性与方法 小demo 二.绘制功能 2.1.绘制矩形 2.1.1.非面向思想实现动画 2.1.2.面向对象思维实现动画 2.2.绘制路径 2.3.绘制圆弧(动态圆形 ...
- canvas(1)---基础知识
1.在html中创建一个canvas标签: <canvas id='canv' width='800' height='800'></canvas>//注意:宽高只能这样写,不 ...
最新文章
- C++ 三五法则,看看你能不能理解
- 算法------------搜索二维矩阵
- DLL load failed: 页面文件太小,无法完成操作
- oracle修改时区无效,Linux 7 修改时区不生效
- VS.NET 学习方法论——我的VS.NET学习之旅
- Java连接SQL2005及SQL Server JDBC Driver 2.0中sqljdbc.jar和sqljdbc4.jar的区别
- jQuery之ajax的跨域获取数据
- 仿QQ聊天室【方案】
- postfix所谓的监控功能只是利用sender_bcc而已
- 企业Linux安全机制遭遇信任危机 SELinux成骇客帮凶?
- 好消息,MaxtoCode 1.10 已经封包,待2005.5.5日发布(如果有Bug将在1.20改正)
- pycharm输入不了代码_最易懂的Python新手教程:从基础语法到代码详解
- 华东理工大学计算机网络作业,华东理工大学计算机网络实验操作手册.pdf
- python实现画小猪佩奇
- robocup初学(第一篇)
- 表情包组件(vue)
- 轻松学会设计模式——工厂模式
- GEE引擎白屏怎么修复?
- Visual Studio 找不到一个或多个组件,请重新安装该应用程序
- java.lang.UnsatisfiedLinkError: dll: Can't find dependent libraries