canvas详解----绘制线条

<!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. Android中Canvas绘图基础详解（附源码下载） (转)

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

  2. canvas绘图API详解

    canvas绘图API详解 1.context的状态 矩阵变换属性 当前剪辑区域 context的其他状态属性: strokeStyle, fillStyle, globalAlpha, lineWi ...

  3. canvas arcTo()用法详解 – CodePlayer

    canvas arcTo()用法详解 – CodePlayer canvas arcTo()用法详解

  4. 使用html5 Canvas绘制线条(直线、折线等)

    使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...

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

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

  6. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  7. 第157天：canvas基础知识详解

    目录 一.canvas简介 1.1 什么是canvas?(了解) 1.2 canvas主要应用的领域(了解) 二.canvas绘图基础 2.0 sublime配置canvas插件(推荐) 2.1 Ca ...

  8. Android查缺补漏（View篇）--自定义View利器Canvas和Paint详解

    上篇文章介绍了自定义View的创建流程,从宏观上给出了一个自定义View的创建步骤,本篇是上一篇文章的延续,介绍了自定义View中两个必不可少的工具Canvas和Paint,从细节上更进一步的讲解自定 ...

  9. canvas createPattern()方法详解

    createPattern作用 createPattern() 方法在指定的方向内重复指定的元素. 元素可以是图片.视频,或者其他 <canvas> 元素. 被重复的元素可用于绘制/填充矩 ...

随机推荐

  1. 【搞定Jvm面试】 Java 内存区域揭秘附常见面试题解析

    本文已经收录自笔者开源的 JavaGuide: https://github.com/Snailclimb ([Java学习+面试指南] 一份涵盖大部分Java程序员所需要掌握的核心知识)如果觉得不错 ...

  2. ARTS-S 在docker中运行本地脚本

    很多情况是本地没有编译环境,但docker中有编译环境.想编译本地代码,就要把本地的代码和编译脚本映射到docker中,脚本如下: docker run \ -it \ -v /Users/usern ...

  3. IP，MAC

    MAC寻址与IP寻址 两者是协议上的区分,MAC地址是网卡的物理地址,是提供二层交换机转发数据的,交换机会在自己的内部形成一个MAC地址表,然后根据这个表转发数据包:再者,如果说网络规模大一点的话,机 ...

  4. 利用Bootstrap搭建网站页面

    先来看下页面效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. robotframework配置邮箱服务器

    1.登录邮箱以腾讯企业邮箱为例:开启smtp服务并获得邮箱的客户端授权码 用户名:18890260218@163.com 客户端授权码:admin123 2.进入系统管理-->GO to plu ...

  6. 设置QQ环境变量

    1.右击此电脑 → 属性 win10用户可以直接按 'win'键 ,输入 "系统环境变量" 2.点击 高级系统环境设置 → 环境变量 3.在系统变量里找到 path → 编辑 4. ...

  7. Jmeter查看结果树之查看响应的13种方法[详解]

    查看结果树查看响应有哪几种方法,可通过左侧面板底部的下拉框选择 1.Text 查看结果树中请求的默认格式为text,会显示请求的取样器结果.请求.响应数据3个部分内容. 取样器结果: 默认Raw视图, ...

  8. hikari连接池属性详解

    hikari连接池属性详解 一.主要配置 1.dataSourceClassName 这是DataSourceJDBC驱动程序提供的类的名称.请查阅您的特定JDBC驱动程序的文档以获取此类名称,或参阅 ...

  9. 建议3:正确处理Javascript特殊值---(1)正确使用NaN和Infinity

    NaN时IEEE 754中定义的一个特殊的数量值.他不表示一个数字,尽管下面的表达式返回的是true typeof(NaN) === 'number' //true 该值可能会在试图将非数字形式的字符 ...

  10. 简单使用一下IDEA 的HTTP Client

    前言 只有光头才能变强. 文本已收录至我的GitHub精选文章,欢迎Star:https://github.com/ZhongFuCheng3y/3y 相信大家都用过POSTMAN吧,后端在开发的时候 ...