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详解----绘制线条的更多相关文章
- canvas详解---绘制弧线
Draw an arc context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false); 参数一是圆 ...
- HTML5中的Canvas详解
什么是Canvas HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器,您必须使用脚本来绘制图 ...
- Android之canvas详解
首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, y ...
- 转载爱哥自定义View系列--Canvas详解
上面所罗列出来的各种drawXXX方法就是Canvas中定义好的能画什么的方法(drawPaint除外),除了各种基本型比如矩形圆形椭圆直曲线外Canvas也能直接让我们绘制各种图片以及颜色等等,但是 ...
- canvas详解---矩形绘制
首先,就上述绘制弧线的章节进行一个小小的补充: 如果我们使用了context.beginPath();紧接着后面的context.moveTo(x,y),可以改为context.lineTo(x,y) ...
- canvas绘制线条详解
canvas详解----绘制线条 <!DOCTYPE html> <html> <head> <title>canvas详解</title> ...
- android 开发 View _6_Canvas详解
牛逼大神的博客地址:http://www.gcssloop.com/customview/Canvas_BasicGraphics 安卓自定义View进阶-Canvas之绘制图形 在上一篇自定义Vie ...
- html5的canvas绘制线条,moveTo和lineTo详解
今天在看html5,里面新增的属性有一个canvas,它相当于一个画布你可以用js在里面画你想要的效果!我在w3c的手册里面看到用moveTo和lineTo绘制线条讲的不是很清楚,尤其是moveTo和 ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
随机推荐
- 如何安装 IntelliJ IDEA 最新版本——详细教程
IntelliJ IDEA 简称 IDEA,被业界公认为最好的 Java 集成开发工具,尤其在智能代码助手.代码自动提示.代码重构.代码版本管理(Git.SVN.Maven).单元测试.代码分析等方面 ...
- 精通awk系列(6):awk命令结构和awk语法结构
回到: Linux系列文章 Shell系列文章 Awk系列文章 awk命令行结构和语法结构 awk命令行结构 awk [ -- ] program-text file ... (1) awk -f p ...
- Jenkins使用SSH构建Go项目并执行
目录 下载插件 配置要部署的服务器 构建项目 Jenkinx可以帮助我们通过SSH插件,将项目直接部署到指定的服务器. 下载插件 (1)点击左侧的"系统管理"菜单 ,然后点击 (2 ...
- Lucene&Solr框架之第二篇
2.1.开发环境准备 2.1.1.数据库jar包 我们这里可以尝试着从数据库中采集数据,因此需要连接数据库,我们一直用MySQL,所以这里需要MySQL的jar包 2.1.2.MyBatis的jar包 ...
- Class文件结构-属性表
一.属性表整体结构 二.属性表具体结构
- WASM 成为 HTML、CSS 与 JS 之后的第 4 门 Web 语言
大家都知道,万维网联盟 W3C 认证的 Web 语言有 HTML.CSS 与 JavaScript,而近日联盟正式宣布 WebAssembly 核心规范(WebAssembly Core Specif ...
- yml和properties的加载顺序和区别
正常的情况是先加载yml,接下来加载properties文件.如果相同的配置存在于两个文件中.最后会使用properties中的配置.最后读取的优先集最高. 两个配置文件中的端口号不一样会读取prop ...
- 设计模式-工厂模式(Factory)(创建型模式)
以下代码来源: 设计模式精解-GoF 23种设计模式解析附C++实现源码 //Product.h #pragma once class Product { public: ; protected: P ...
- @Transactional注解失效
一.特性 先来了解一下@Transactional注解事务的特性吧,可以更好排查问题 1.service类标签(一般不建议在接口上)上添加@Transactional,可以将整个类纳入spring事务 ...
- Java题库——Chapter4 循环
1)How many times will the following code print "Welcome to Java"? int count = 0; while (co ...