canvas绘制直线和多边形基本操作
<!DOCTYPE HTML>
<html lang="en">
<body>
<canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;display:block;margin:0 auto;">
您的浏览器不支持 canvas 标签.
</canvas>
<script type="text/javascript">
window.onload=function(){
//var是定义一个变量
var canvas=document.getElementById("canvas");//获取画布id为canvas;
canvas.width=1024;
canvas.height=768;//通过这两种方式也可以设置canvas的大小；
var context=canvas.getContext("2d");//获取绘图2D环境；
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.fillstyle="#eeddcc";
context.fill();//添充颜色调用出
context.strokeStyle="green";
context.stroke();
}
</script>
</body>
</html>
canvas绘制直线和多边形基本操作的更多相关文章
- 封装 用canvas绘制直线的函数--面向对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- canvas绘制直线
HTML5 <canvas>元素用于图形的绘制,该元素只是图形容器,必须使用javascript脚本绘制图形创建一个画布:<canvas id="myCanvas" ...
- 使用html5 Canvas绘制线条(直线、折线等)
使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...
- 使用Canvas绘制图形的基本教程
原文地址:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...
- HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...
- C++实现glut绘制点、直线、多边形、圆
C++实现glut绘制点.直线.多边形.圆 必备环境 glut.h 头文件 glut32.lib 对象文件库 glut32.dll 动态连接库 程序说明 C++实现了用glut画点.画直线.画多边形和 ...
- canvas教程(二) 绘制直线
经过 canvas 教程(一) 简介 我们知道了 canvas 的一些基本情况 而本次是给大家带来直线的绘制 canvas 中,基本图形有两种,一种是直线,还有一种是曲线 但是无论是直线还是曲线,我们 ...
- canvas绘制多边形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 学习Canvas绘图与动画基础 绘制直线（二）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
随机推荐
- linux -- 串口调试总结
linux 串口输出调试 在某些情况下,需要同时对两台或多台Linux主机进行管理和操作.如果手头缺少足够多的键盘和显示器,那么通过一台机器的串口对其余主机进行控制不失为一种快捷.有效的方法. 下面就 ...
- Codeforces Round #217 (Div. 2) c题
C. Mittens time limit per test 1 second memory limit per test 256 megabytes input standard input out ...
- [转]linux系统磁盘分区之parted
转自:http://blog.csdn.net/h249059945/article/details/12668793 对于linux的分区通常可以使用fdisk命令工具和parted工具对于分区表通 ...
- eclipse 编辑器的使用
随着所编辑的文件数目的增加以及在这些文件之间的快速切换,一个又一个文件的编码以及对编辑器会话(session)的管理将会变得非常复杂.这时,有几件事情你是可以做的. 通过使用键盘快捷键,你可以快速选择 ...
- 原创 | 《地狱边境》登顶50国iOS下载榜，恐怖游戏或是独立开发者突破口（转）
文/手游那点事 Jagger 与大厂强IP称霸的App Store畅销榜相比,付费榜一向是独立游戏的温床.高质量的独立游戏并不需要在推广营销中投入太多成本,依靠过硬的品质和口碑在付费榜中缓缓上升造就高 ...
- 序列for循环语句
序列for循环语句 序列for循环语句允许重复遍历一组序列,而这组序列可以是任何可以重复遍历的序列,如由begin()和end()函数定义的STL序列.所有的标准容器都可用作这种序列,同时它也同样可以 ...
- python内建函数sorted方法概述
python中,具体到对list进行排序的方法有俩,一个是list自带的sort方法,这个是直接对list进行操作,只有list才包含的方法:另外一个是内建函数sorted方法,可以对所有可迭代的对象 ...
- map，hash_map和unordered_map 实现比较
map介绍 Map是STL[1]的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称为该关键字的值)的数据处理能力,由于这个特性,它完成有可能在我们处 ...
- BITED-Windows8应用开发学习札记之四：如何在Win8 应用中实现语义缩放
语意缩放的意义在于:创新的语意缩放外观,让你的应用随时展现信息可视化的力量.如图表般的Tile,随着数据的不同而变化,让你的页面更富节奏.而所谓的语意缩放就是通过上下文的跳转,帮助我们实现一种更快更便 ...
- 40个超酷的jQuery动画效果教程
自从出现,jQuery就在web领域就引起了轰动,现在它已经成为Web动画效果的最佳解决方案之一.jQuery提供了良好的交叉浏览器支持,并且轻便易用.现在,jQuery在定义和控制小型的Web动画诸 ...