<!DOCTYPE html>

<html>

<head>

<title>canvas详解</title>

</head>

<body>

<canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;display:block;margin:50 auto;"></canvas>

</body>

</html>

其中创建一个canvas元素就可以创建一个画布，但是如果你不设置参数的话，在浏览器上面是不显示的。所以可以设置一些参数让画布显示出来。此外画布的宽度可以在标签内设置，如果在css中设置宽度，高度，其实设置的是画布的显示宽度，高度。此外这里面的高度，宽度都没有设置px，不需要设置这些。

如何使用canvas画布操作，需要在javascript中进行如下操作

var canvas=document.getElementById("canvas");

var context=canvas.getContext("2d");

首先获取canvas画布，然后在获取上下文环境context;

在html文件中加入下面代码

<script type="text/javascript">

window.onload=function(){

var canvas=document.getElementById("canvas");

canvas.width=1024;

canvas.height=768;//通过这两种方式也可以设置canvas的大小；

var context=canvas.getContext("2d");

}

</script>

如果你想让浏览器不兼容这个画布的时候显示"浏览器不兼容的字样的时候"可以在html中canvas标签内填写<canvas id="canvas">浏览器不兼容</canvas>

也可以在js中设置

if(canvas.getContext("2d")){

var context=canvas.getContext("2d");

} else{

alert("浏览器不兼容");

}

现在来看一下如何画一条线

Draw a line

context.moveTo(100,100)

context.lineTo(700,700)

context.stroke()

canvas绘图是一种基于状态的绘图

也就是说他是先想好如何绘图，设置好状态，然后再来绘制图形，上面的moveTo().lineTo()，设置的就是绘图状态

表示的是一个线段，moveTo(x,y)表示的是从点(x,y)开始绘制线段，lineTo(x1,y1)表示这个线段的终点是点(x1,y1);然后真正绘制的函数是stroke(),用来绘制线段，最终绘制好了一条线段。

此外还可以设置线条的一些属性，在stroke之前，比如

canvas.lineWidth=5;设置线条的宽度    canvas.strokeStyle="#eeddcc".或者canvas.fillStyle="";设置线条的样式，主要是颜色。

context.moveTo(100,100)

context.lineTo(700,700)

context.lineTo(240,340)

context.stroke()

这样画出来的是一条折线，起点是(100,100),画到(700,700)，然后在以(700,700)为起点，画到(240340).

如果 再在后面加上一句conText.lineTo(100,100)就成了一个三角形了。

如果我们要给这个三角形着色的话，就需要以下操作

将stroke()换成fill();

context.moveTo(100,100)

context.lineTo(700,700)

context.lineTo(240,340)

canvas.fillStyle="#eeddcc".

context.fill();

如果我们在后面再加上这样一句；

context.moveTo(100,100);
context.lineTo(367,345);
context.lineTo(798,456);
context.lineTo(100,100);

context.fillStyle="rgb(2,100,30)";
context.fill();
context.lineWidth=5;
context.strokeStyle="red";
context.stroke();

表示的是在这个重了颜色的三角形上给他的边缘在画一下，最终结果是这个三角形的填充色是rgb(2,100,30)，边框线的颜色是red；

上面讲述的都是画一个形状，如果画两个图像呢？

context.moveTo(100,100);
context.lineTo(200,200);
context.lineTo(100,456);
context.lineTo(100,100);
context.lineWidth=5;
context.strokeStyle="rgb(2,100,30)";
context.stroke();
context.moveTo(120,100);
context.lineTo(220,200);
context.strokeStyle="red";
context.stroke();最后你会发现这两个图像都是这个颜色red，为什么会出现这种原因呢？？？

因为之前我们都说过canvas绘图是状态绘图，在绘制第二个图形时，第一个图形的状态又重新执行了一次，然而颜色却是以最后的颜色执行的。所以都是红色，并且线的粗细也一样。

另外还要注意，如果上面设置的是填充，下面设置的是画线，怎是不一样的。注意了。

最后这里面我们设置画布的大小，以及线的宽度都没有加px；注意了奥！

那我们如何画两个及以上图像且设置他们不同属性啊。

这时候我们就要在路径开始前加上一句context.beginPath(),结束之后加上一句context.closePath();

这样在这两句之间的路径只会在下面最近的绘制中执行，下面的下面的绘制不会在执行了。

context.lineWidth=5;
context.beginPath();
context.moveTo(120,100);
context.lineTo(220,200);
context.closePath();
context.strokeStyle="red";
context.stroke();
context.beginPath();
context.moveTo(100,100);
context.lineTo(200,200);
context.lineTo(100,456);
context.lineTo(100,100);
context.closePath();
context.strokeStyle="rgb(2,100,30)";
context.stroke();

结果显示如下

canvas详解----绘制线条的更多相关文章

  1. canvas详解---绘制弧线

    Draw an arc context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false); 参数一是圆 ...

  2. HTML5中的Canvas详解

    什么是Canvas HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器,您必须使用脚本来绘制图 ...

  3. Android之canvas详解

    首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, y ...

  4. 转载爱哥自定义View系列－－Canvas详解

    上面所罗列出来的各种drawXXX方法就是Canvas中定义好的能画什么的方法(drawPaint除外),除了各种基本型比如矩形圆形椭圆直曲线外Canvas也能直接让我们绘制各种图片以及颜色等等,但是 ...

  5. canvas详解---矩形绘制

    首先,就上述绘制弧线的章节进行一个小小的补充: 如果我们使用了context.beginPath();紧接着后面的context.moveTo(x,y),可以改为context.lineTo(x,y) ...

  6. canvas绘制线条详解

    canvas详解----绘制线条 <!DOCTYPE html> <html> <head> <title>canvas详解</title> ...

  7. android 开发 View _6_Canvas详解

    牛逼大神的博客地址:http://www.gcssloop.com/customview/Canvas_BasicGraphics 安卓自定义View进阶-Canvas之绘制图形 在上一篇自定义Vie ...

  8. html5的canvas绘制线条，moveTo和lineTo详解

    今天在看html5,里面新增的属性有一个canvas,它相当于一个画布你可以用js在里面画你想要的效果!我在w3c的手册里面看到用moveTo和lineTo绘制线条讲的不是很清楚,尤其是moveTo和 ...

  9. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

随机推荐

  1. C#/.Net开发入门篇（3）——console类的输入输出

    相信看了我上一篇文章的小伙伴们都知道console这个类的最基本的2个方法了吧,下去练习过的小伙伴应该能知道4个方法. 那么下面我们就来介绍一下上期没有介绍完的另外2个方法Console.WriteL ...

  2. ASP.Net 设置 404错误跳转到指定页面

    分享 ASP.Net 网站设置 404错误跳转到指定页面的三种方法 方法一:Web.config 配置 1 首先双击打开项目中的“Web.config”文件  找到 system.web 节点,在 c ...

  3. (转)LSTM神经网络介绍

    原文链接:http://www.atyun.com/16821.html 扩展阅读: https://machinelearningmastery.com/time-series-prediction ...

  4. mysql中skip-grant-tables无效

    今天我登录MySQL时,MySQL竟然报出这样的错误:ERROR 1045 (28000): Access denied for user ‘root’@‘localhost’ (using pass ...

  5. django-xadmin自定义widget插件（自定义详情页字段的显示样式）

    有时候我们想要修改xadmin详情页字段的显示方式,比如django默认的ImageField在后台显示的是image的url,我们更希望看到image的缩略图:再比如django将多对多字段显示为多 ...

  6. supervisor 工具使用

    最近项目要使用supervisor 来管理程序,简单查了查,发现比较容易使用: 中文博客查了查,发现很多人都写出了教程,我这边就懒得写了,找了几个能看懂的记录如下: https://www.cnblo ...

  7. 电池中的NTC功能是什么？【转】

    电池的NTC功能是什么 因为可充电电池在不断的循环充电和放电过程中可能会导致电池温度的过高,导致电池原始性能下降.为了保持电池性能,密切监测电池温度非常重要,NTC在充电电池组内部的合适应用中可以起到 ...

  8. CentOS高可用集群LVS+Keepalived(DR模式)

    操作系统:CentOS6.5_x64 mini 负载均衡模式:DR(直接路由) LVS与Keepalived简述: LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是 ...

  9. Ubuntu下配置IP地址

    17.10版本之前: Ubuntu的网卡配置文件跟CentOS的不一样,Ubuntu的网卡配置文件是/etc/network/interfaces.我们用vi /etc/network/interfa ...

  10. ABC135记录

    date: 2019-07-28 A - Harmony 题目大意: 给你两个不同的整数A和B,要求你找到一个整数K,同时满足|A-K|=|B-K|.找不到时,输出"IMPOSSIBLE&q ...