<!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中的OutOfMemoryError的各种情况及解决和JVM内存结构

    在JVM中内存一共有3种:Heap(堆内存),Non-Heap(非堆内存) [3]和Native(本地内存). [1] 堆内存是运行时分配所有类实例和数组的一块内存区域.非堆内存包含方法区和JVM内部 ...

  2. 通过DDOS攻击流程图来浅谈如何预防Ddos攻击与防御

    DDOS攻击流程图 站长之家配图(来源:ppkj.net) 一 背景 在前几天,我们运营的某网站遭受了一次ddos攻击,我们的网站是一个公益性质的网站,为各个厂商和白帽子之间搭建一个平台以传递安全问题 ...

  3. Delphi 异或，英文为exclusive OR，或缩写成xor

    异或,英文为exclusive OR,或缩写成xor 异或(xor)是一个数学运算符.它应用于逻辑运算.异或的数学符号为“⊕”,计算机符号为“xor”.其运算法则为: a⊕b = (¬a ∧ b) ∨ ...

  4. Groovy读取properties及txt

    昨晚帮老同事解决了一个SoapUI的代码问题,好长时间没用SoapUI,好多东西都忘了,今天先总结下Groovy读取properties 首先吐槽下SoapUI的apidocs,我几乎从中看不出什么东 ...

  5. Solaris系统管理（二）资源管理与网络配置

    上一篇主要总结了Solaris安装后需要进行的一些设置,如ssh,pkgutil管理依赖,vim安装. 这一篇将会对Solaris资源管理与网络配置进行总结. 四 Solaris 系统管理 1,查询总 ...

  6. JavaScript 教程学习进度备忘

    书签:"JavaScript 课外书"即“JS 教程”底部的“马上开始学习 JavaScript 高级教程吧 !”链接跳过,它属于高级教程:另外跳过的内容有待跟进 ________ ...

  7. scrollTop

    scrollTop 表示滚动的高度,默认从position:0;开始向下滚,scrollTop(offset)的offset表示相对顶部的偏移,以像素计,<br/> scrollTop() ...

  8. VHDL之Port map and open

    编SPI的master控制器,使用公司基本的元件,有些端口用不着,恰巧好二哥(不知年龄的数字组组长,本名Holger)来了,于是请教之,告曰open关键词.后来深感自己VHDL水平太水,下了一本电子书 ...

  9. Cubietruck查看CPU及硬盘温度

    想看看我的Cubietruck的工作状态,尤其是CPU及硬盘温度如何. 网上推荐的都是使用 lm-sensors 查看电脑温度.但是尝试后无奈发现该软件不兼容我的 Cubietruck. 然后就发现外 ...

  10. LeetCode(8) － String to Integer (atoi)

    虽然是easy,却是比较繁琐的一道题,需要考虑各种边界条件.在WA了好几遍之后,才把各种边界条件给补全.需要考虑到的因素如下: 输入不合法字符,非"0-9",对于首位,合法字符还包 ...