<!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绘制直线和多边形基本操作的更多相关文章

  1. 封装 用canvas绘制直线的函数--面向对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. canvas绘制直线

    HTML5 <canvas>元素用于图形的绘制,该元素只是图形容器,必须使用javascript脚本绘制图形创建一个画布:<canvas id="myCanvas" ...

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

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

  4. 使用Canvas绘制图形的基本教程

    原文地址:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...

  5. HTML5之Canvas绘图——使用Canvas绘制图形的基本教程

    原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...

  6. C++实现glut绘制点、直线、多边形、圆

    C++实现glut绘制点.直线.多边形.圆 必备环境 glut.h 头文件 glut32.lib 对象文件库 glut32.dll 动态连接库 程序说明 C++实现了用glut画点.画直线.画多边形和 ...

  7. canvas教程(二) 绘制直线

    经过 canvas 教程(一) 简介 我们知道了 canvas 的一些基本情况 而本次是给大家带来直线的绘制 canvas 中,基本图形有两种,一种是直线,还有一种是曲线 但是无论是直线还是曲线,我们 ...

  8. canvas绘制多边形

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 学习Canvas绘图与动画基础 绘制直线（二）

    1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...

随机推荐

  1. 配置java环境时，java的path地址放在其他地址的前面还是后面？

      PATH环境变量里是按顺序查找的,如果电脑里只有一个jdk,放哪都一样,有多个放前面的会优先.   一般是放在最前面吧,以免其他在path中的程序需要用到Java环境而由于在JAVA_PATH之前 ...

  2. Shell教程6-Shell注释

    以“#”开头的行就是注释,会被解释器忽略. sh里没有多行注释,只能每一行加一个#号.只能像这样: #-------------------------------------------- # 这是 ...

  3. The Network Adapter could not establish the connection解决办法

    用 oracle net manager 将监听改为IP地址,将服务命名也改为IP地址,然后数据库连接改为IP地址方式不要用localhost

  4. 嵌入式 Linux下修改MAC地址

    Linux下修改MAC地址 方法一: 1.关闭网卡设备ifconfig eth0 down2.修改MAC地址ifconfig eth0 hw ether MAC地址3.重启网卡ifconfig eth ...

  5. Yii: 设置数据翻页

    一种方法是使用CPagination处理翻页需要的数据如:总数据项数,每页数据项数,当前页,然后在视图中使用CBasePager来绘制. 控制器动作的代码示范: function actionInde ...

  6. delphi 注册表操作(读取、添加、删除、修改)完全手册

    DELPHI VS PASCAL(87)  32位Delphi程序中可利用TRegistry对象来存取注册表文件中的信息. 一.创建和释放TRegistry对象 1.创建TRegistry对象.为了操 ...

  7. Quartz使用总结

    废话的前言 以前凭借年轻,凡事都靠脑记.现在工作几年后发现,很多以前看过.用过的东西,再次拿起的时候总觉得记不牢靠."好记性不如烂笔头"应该是某位上了年纪的大叔的切肤之痛(仅次于上 ...

  8. ansible命令执行模块使用

    ansible命令执行模块使用 1.命令执行模块-command 在远程节点上运行命令. 命令模块使用命令名称,接上空格-的分割符作为参数使用,但是不支持管道符和变量等,如果要使用这些,那么可以使用s ...

  9. .hpp文件

    hpp在C++中的含义 以前在开源代码里面遇到过,今天看boost源码的时候又遇到了,故学习一下. hPP,计算机术语,用C/C++语言编写的头文件,通常用来定义数据类型,声明变量.函数.结构和类.而 ...

  10. gem 相关命令

    gem #查看gem源 gem sources # 删除默认的gem源 gem sources --remove http://rubygems.org/ # 增加taobao作为gem源 gem s ...