<!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. 将UE添加到右键菜单

    1.新建UE.reg文件,将如下代码拷贝进去.注意UE安装路径 Windows Registry Editor Version 5.00  [HKEY_CLASSES_ROOT*shell]  [HK ...

  2. js函数内嵌函数的整体跳出 .

    stop=false; $.ajax({success:function(){ 这里面不能用return false跳出整个<script></script>,只能跳出该处的f ...

  3. 关于div居中

    margin : 100px; margin-left: auto; margin-right: auto; 这样子设置css样式就可以实现一个div居中

  4. [Everyday Mathematics]20150218

    设 $A,B$ 是 $n$ 阶复方阵, 适合 $$\bex A^2B+BA^2=2ABA. \eex$$ 试证: 存在 $k\in\bbZ^+$, 使得 $(AB-BA)^k=0$.

  5. 平庸与卓越的差别 z

    本文是清华大学陈吉宁校长于在 2015 年第一次研究生毕业典礼暨学位授予仪式上的讲话,原文标题:选择与坚持.演讲非常精彩,值得您细细阅读. 亲爱的同学们: 今天,共有 1318 名同学获得博士.硕士学 ...

  6. 性能测试指标&说明 [解释的灰常清楚哦！！]

    详见: 浅谈软件性能测试中关键指标的监控与分析 http://www.51testing.com/html/18/n-3549018.html

  7. js正则表达式中=s.g表示什么意思

    //g是全局匹配//中间的内容表示:匹配以=开关,后面是0或多个空格,然后是双引号括起来的任意字符,比如:= "any symble" 匹配 = " asfjaskldf ...

  8. 图的邻接表存储表示（C）

    //---------图的邻接表存储表示------- #include<stdio.h> #include<stdlib.h> #define MAX_VERTEXT_NUM ...

  9. 帮哥们做的一个整理文档的小工具（C++ string的标准函数还是很给力的，代码在最下）

    其实把程序用到生活中,真的能节约不少时间!程序的力量是无穷滴! 哥们的毕业设计是要做法律文书匹配之类的东东,有一步是要抽取所有的法律法规名称,而刚好我们要处理的文件中,法规的名称之前都有个‘.‘,所以 ...

  10. linq数据使用

    取出数据库满足条件的记录的ID,把值放到list中 ) { int userid = Convert.ToInt32(Request.Cookies["id"].Value); v ...