目录:

创建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)

canvas的基础使用。的更多相关文章

  1. Android中Canvas绘图基础详解(附源码下载) (转)

    Android中Canvas绘图基础详解(附源码下载) 原文链接  http://blog.csdn.net/iispring/article/details/49770651   AndroidCa ...

  2. canvas绘画基础(一):认识canvas画布

    html5提供了一个<canvas>标签,结合javascript的canvas api接口可以用来绘制图形和动画.最近工作中涉及到画图的任务,下面来了解一下canvas的基础:canva ...

  3. HTML5 CANVAS制图 基础总结

    一.基本绘图 首先,定义2D渲染变量ct(这里用了Jquery库): var ct = $(#canvasId).get(0).getContext('2d'); 以下是绘制各种基本图形的方法: // ...

  4. canvas绘图基础

    <canvas>元素是HTML5中的绘图元素,通过定义一个画布区域,然后使用javascript动态地在这个区域里面绘制图形,对于2D和3D图形都可以绘制,我们将其分成2D上下文和WebG ...

  5. 关于HTML 5 canvas 的基础教程

    HTML 5 规范引进了很多新特性,其中最令人期待的之一就是 canvas 元素.HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大.每一个canv ...

  6. canvas的基础入门

    canvas是定义在浏览器上的画布.它不仅仅是一个标签元素更是一个编程工具是一套编程的接口.利用它可以开发出很多东西,比如动画,游戏,动态的图表等富有变现力和感染力的应用.还可以开发出绚丽的3D动态效 ...

  7. HTML5 canvas绘图基础(电子名片生成器源码)

    创建canvas <canvas id="myCanvas" class="canvas"> 您的浏览器不支持canvas </canvas& ...

  8. HTML5 Canvas(基础知识)

    最近笔者在学习HTML5的新元素<canvas>,会分享一些基础知识以及小例子,最终使用<canvas>实现一个绘制简单图表(条形图.线图或者饼图)的js库,会更新一到两篇文章 ...

  9. Canvas绘图基础(一)

    简单图形绘制 矩形:描边与填充 Canvas的API提供了三个方法,分别用于矩形的清除.描边及填充 clearRect(double x, double y, double w, double h) ...

  10. html5之canvas画图基础

    HTML5+CSS3的好处是,你可以编写一个页面分别用于不同的平台,只需要设置不同的css样式就可以了,现在基本主流浏览器都支持全新的HTML5和CSS3,因为它的跨平台开发.因为是原生代码所以它的页 ...

随机推荐

  1. tcp四次撒手

    转自:http://www.cnblogs.com/cy568searchx/p/3711670.html 由于TCP连接是全双工的,因此每个方向都必须单独进行关闭.这个原则是当一方完成它的数据发送任 ...

  2. Caused by: redis.clients.jedis.exceptions.JedisDataException: WRONGTYPE Operation against a key holding the wrong kind of value

    对错误类型key的操作,也就是说redis中没有你当前操作的这个key,而你用这个key去执行某些操作!检查key是否正确

  3. 个人作业Week3-案例分析(201521123103 吴雅娟)

    根据博客要求,写一篇个人随笔 参考来自: http://www.cnblogs.com/xinz/archive/2012/03/26/2417699.html: http://www.cnblogs ...

  4. kkpager的改进,Ajax数据变化但是页码不变的问题,kkpagerajax

    最近做项目用到了kkpager来做分页,在一个页面只是调用一次的时候不会出现问题,但是在一个页面多次调用就出现问题了. 在网上搜集了好久,终于找到了解决方法,记录下来方便以后使用.希望也可以方便需要的 ...

  5. capacilitys docker中的权限设置 privileged

    capacilities是docker 中对docker权限设置的重要方面: http://blog.csdn.net/wangpengqi/article/details/9821227 上面这篇文 ...

  6. ES 1.7安装ik分词elasticsearch-analysis-ik-1.2.5

    IK简介 https://www.cnblogs.com/yjf512/p/4789239.html https://www.cnblogs.com/xing901022/p/5910139.html ...

  7. zTree删除节点

    zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree删除节点. <!DOCTYPE html> &l ...

  8. arc068 E: Snuke Line

    首先要知道 (m/1 + m/2 + ... + m/m) 约为 mlogm 还有一个比较明显的结论,如果一个纪念品区间长度大于d,那么如果列车的停车间隔小于等于d,则这个纪念品一定能被买到 然后把区 ...

  9. [LINUX]警告:检测到时钟错误。您的创建可能是不完整的。

    [LINUX]警告:检测到时钟错误.您的创建可能是不完整的.   原因:     如果上一次编译时为20071001,你把系统时间改成20070901后再编译就会报这样的错误. 解决:     把时间 ...

  10. [洛谷P3946] ことりのおやつ(小鸟的点心)

    题目大意:最短路,第$i$个点原有积雪$h_i$,极限雪高$l_i$(即雪超过极限雪高就不可以行走),每秒降雪$q$,ことり速度为$1m/s$,若时间大于$g$,则输出$wtnap wa kotori ...