<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

</head>

<body>

    <canvas id="canvas" width="500px" height="500px;" style="border: 1px solid #000;"></canvas>

<script>

    window.onload = function(){

        var canvas = document.getElementById('canvas');

        canvas.width = 1024;

        canvas.height = 768;

        var cxt = canvas.getContext("2d");

        cxt.moveTo(100,100);

        cxt.lineTo(300,300);

        cxt.lineTo(100,300);

        cxt.lineTo(100,100);

        cxt.fillStyle = "rgb(2,100,30)";

        cxt.fill();

        cxt.lineWidth = 1;

        cxt.strokeStyle = "red";

        cxt.stroke();

        cxt.closePath();

        cxt.moveTo(100,400)

        cxt.lineTo(400,400)

        cxt.lineTo(300,400)

        cxt.strokeStyle = "green";

        cxt.stroke();

    }

</script>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

</head>

<body>

    <canvas id="canvas" width="500px" height="500px;" style="border: 1px solid #000;"></canvas>

<script>

    window.onload = function(){

        var canvas = document.getElementById('canvas');

        canvas.width = 1024;

        canvas.height = 768;

        var cxt = canvas.getContext("2d");

        cxt.moveTo(100,100);

        cxt.lineTo(300,300);

        cxt.lineTo(100,300);

        cxt.lineTo(100,100);

        cxt.fillStyle = "rgb(2,100,30)";

        cxt.fill();

        cxt.lineWidth = 1;

        cxt.strokeStyle = "red";

        cxt.stroke();

        cxt.closePath();

        cxt.moveTo(100,400)

        cxt.lineTo(400,400)

        cxt.lineTo(300,400)

        cxt.strokeStyle = "green";

        cxt.stroke();

    }

</script>

</body>

</html>

H5 canvas 直线和三角形的更多相关文章

  1. h5 canvas 画图

    h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  2. H5 canvas绘制出现模糊的问题

    在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...

  3. h5 canvas 小球移动

    h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  4. iOS：quartz2D绘图(画一些简单的图形,如直线、三角形、圆、矩形、文字等)

    前一篇几乎已经详细介绍了Quartz2D的所有知识,这一篇以及后面就不废话了,主要是用具体的实例来演示绘图效果. 这里我们先来绘制一些简单的图形(如直线.三角形.圆.矩形.文字.图像),它有两种方式可 ...

  5. H5 canvas 绘图

    H5的canvas绘图技术   canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点.Canvas元素就像一块画布,通过该元素自带的API结合JavaScript代码可以绘制 ...

  6. 使用H5 canvas画一个坦克

      具体步骤如下:   1. 首先做出绘图区,作为坦克的战场   <canvas id="floor" width="800px" height=&quo ...

  7. CoreGraphics-基本图形绘制-直线、三角形、矩形、椭圆形、弧形

    框架:CoreGraphics 步骤: 1."获取"图形上下文     let cxtRef = UIGraphicsGetCurrentContext()! 2.添加路径 3.渲 ...

  8. H5 canvas填充文字自动换行

    canvas是H5中非常重要,非常常用,也是非常强大的一个新标签,美中不足的事,canvas中没没有自动换行的属性,我的第一反应是,字符串截取,然后计算每行的距离来实现自动换行.. 然后百度了一下,已 ...

  9. h5 canvas

    概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap). 使用前,首先需要新建一个canvas网页元素. & ...

随机推荐

  1. Ubuntu 12.10终端Terminal快捷方式调用

    1:使用快捷键:ctrl+alt+t 打开终端 2:在终端上右键,选“Lock to launcher” 这样就锁定在左侧了,需要用时,直接点就打开了.

  2. assert的作用是什么

    assert()宏是用于保证满足某个特定条件,用法是: assert(表达式); 如果表达式的值为假,整个程序将退出,并输出一条错误信息.如果表达式的值为真则继续执行后面的语句. 使用这个宏前需要包含 ...

  3. eclipse自动创建项目出错Cannot change version of project facet Dynamic Web Module to 2.3.

    Cannot change version of project facet Dynamic Web Module to 2.3. step1:修改properties step2:修改web.xml ...

  4. python dig 模拟—— DGA域名判定用

    #!/usr/bin/env python import dns.resolver, sys def get_domain_ip(domain): """Get the ...

  5. Rust语言——无虚拟机、无垃圾收集器、无运行时、无空指针/野指针/内存越界/缓冲区溢出/段错误、无数据竞争

    2006年,编程语言工程师Graydon Hoare利用业余时间启动了Rust语言项目.该项目充分借鉴了C/C++/Java/Python等语言的经验,试图在保持良好性能的同时,克服以往编程语言所存在 ...

  6. bzoj 1079: [SCOI2008]着色方案【记忆化搜索】

    本来打算把每个颜色剩下的压起来存map来记忆化,写一半发现自己zz了 考虑当前都能涂x次的油漆本质是一样的. 直接存五个变量分别是剩下12345个格子的油漆数,然后直接开数组把这个和步数存起来,记忆化 ...

  7. 【爬坑系列】之vxlan网络实现

    linux 内核从3.7之后就内部集成了vxlan功能,所以可以使用linux内核提供的vxlan功能,经过配置创建vxlan网络. 而从Docker自Docker Engine 1.9之后,就自带o ...

  8. 从Oracle9i RMAN全库备份迁移到 Oracle10g

    1. 创建以下目录: mkdir -pv $ORACLE_BASE/admin/$ORACLE_SID/{{a,b,c,dp,u}dump,pfile} mkdir -pv $ORACLE_BASE/ ...

  9. Poj 2289 Jamie's Contact Groups (二分+二分图多重匹配)

    题目链接: Poj 2289 Jamie's Contact Groups 题目描述: 给出n个人的名单和每个人可以被分到的组,问将n个人分到m个组内,并且人数最多的组人数要尽量少,问人数最多的组有多 ...

  10. [USACO 2011 Nov Gold] Cow Steeplechase【二分图】

    传送门:http://www.usaco.org/index.php?page=viewproblem2&cpid=93 很容易发现,这是一个二分图的模型.竖直线是X集,水平线是Y集,若某条竖 ...