canvas绘制线条详解
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绘制线条详解的更多相关文章
- Android中Canvas绘图基础详解（附源码下载） (转)
Android中Canvas绘图基础详解(附源码下载) 原文链接 http://blog.csdn.net/iispring/article/details/49770651 AndroidCa ...
- canvas绘图API详解
canvas绘图API详解 1.context的状态 矩阵变换属性 当前剪辑区域 context的其他状态属性: strokeStyle, fillStyle, globalAlpha, lineWi ...
- canvas arcTo()用法详解 – CodePlayer
canvas arcTo()用法详解 – CodePlayer canvas arcTo()用法详解
- 使用html5 Canvas绘制线条(直线、折线等)
使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...
- html5的canvas绘制线条，moveTo和lineTo详解
今天在看html5,里面新增的属性有一个canvas,它相当于一个画布你可以用js在里面画你想要的效果!我在w3c的手册里面看到用moveTo和lineTo绘制线条讲的不是很清楚,尤其是moveTo和 ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- 第157天：canvas基础知识详解
目录 一.canvas简介 1.1 什么是canvas?(了解) 1.2 canvas主要应用的领域(了解) 二.canvas绘图基础 2.0 sublime配置canvas插件(推荐) 2.1 Ca ...
- Android查缺补漏（View篇）--自定义View利器Canvas和Paint详解
上篇文章介绍了自定义View的创建流程,从宏观上给出了一个自定义View的创建步骤,本篇是上一篇文章的延续,介绍了自定义View中两个必不可少的工具Canvas和Paint,从细节上更进一步的讲解自定 ...
- canvas createPattern()方法详解
createPattern作用 createPattern() 方法在指定的方向内重复指定的元素. 元素可以是图片.视频,或者其他 <canvas> 元素. 被重复的元素可用于绘制/填充矩 ...
随机推荐
- Java中跳出多重嵌套循环的方法
一.使用标号 1.多重嵌套循环前定义一个标号 2.里层循环的代码中使用带有标号 break 的语句 public static void main(String[] args) { ok: for(i ...
- JavaEE基础(04)：会话跟踪技术，Session和Cookie详解
本文源码:GitHub·点这里 || GitEE·点这里 一.会话跟踪 1.场景描述 比如登录某个购物网站,身份识别成功后,在网站下单,支付 等操作,这些操作中当前登录用户信息必须是共享的,这样这些操 ...
- 基于 Blazui 的 Blazor 后台管理模板 BlazAdmin 正式尝鲜
简介 BlazAdmin 是一个基于Blazui的后台管理模板,无JS,无TS,非 Silverlight,非 WebForm,一个标签即可使用. 我将在下一篇文章讨论 Blazor 服务器端渲染与客 ...
- c语言输入矩阵的对角线之和
一.程序代码如下 #include<stdio.h> #define M 4 main() { int matrix[][M]={ {1,2,4,5},{2,6,6,7},{8,7,6,5 ...
- Linux sudo用户提权与日志审计
一.格式说明及常用配置选项 格式: 用户或组 主机=授权可以使用哪个用户的权限 可以执行的命令 User_Alias 用户定义别名(别名可以是用户,用户组(用户组前面要加%))例:User_Alias ...
- HPS端的GPIO如何控制
该笔记主要记录HPS端的GPIO如何控制,包括控制LED和Key 1.GPIO地址映射 Peripheral Base Address 0xf000_0000 64M 2.HPS外设 (1)GPIO ...
- poj 1741 Tree (树的分治）
Tree Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 30928 Accepted: 10351 Descriptio ...
- 《Java基础知识》Java类的基本运行顺序
我们以下面的类来说明一个基本的 Java 类的运行顺序: public class Demo { private String name; private int age; public Demo() ...
- AQS系列（六）- Semaphore的使用及原理
前言 Semaphore也是JUC包中一个用于并发控制的工具类,举个常用场景的例子:有三台电脑五个人,每个人都要用电脑注册一个自己的账户,这时最开始只能同时有三个人操作电脑注册账户,这三个人中有人操作 ...
- Educational Codeforces Round 78 (Rated for Div. 2)
A题 给出n对串,求s1,是否为s2一段连续子串的重排,串长度只有100,从第一个字符开始枚举,sort之后比较一遍就可以了: char s1[200],s2[200],s3[200]; int ma ...