<!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. RK3288以太网的mac地址调试笔记【学习笔记】【原创】

    平台信息:内核:linux3.1.0系统:android/android6.0平台:RK3288 作者:庄泽彬(欢迎转载,请注明作者) 邮箱:2760715357@qq.com 说明:提供以太网mac ...

  2. Difference between HttpContext.Request and Request

    https://stackoverflow.com/questions/5547989/difference-between-httpcontext-request-and-request Well: ...

  3. python 闭包变量不允许write，要使用nonlocal

    以下是一段简单的闭包代码示例: def foo(): m=3 n=5 def bar(): a=4 return m+n+a return bar >>>bar = foo() &g ...

  4. 谁动了我的cpu——oprofile使用札记

    引言 cpu无端占用高?应用程序响应慢?苦于没有分析的工具? oprofile利用cpu硬件层面提供的性能计数器(performance counter),通过计数采样,帮助我们从进程.函数.代码层面 ...

  5. bzoj1878 [SDOI2009]HH的项链——树状数组

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1878 离线树状数组,巧妙的思路呢: 给每种项链记录一个最后出现的位置lst,根据项链最后出现 ...

  6. Image2Caption

    定义 图像标注或语言生成图像问题把计算机视觉与自然语言处理联系在了一起,是广义的人工智能领域的一大难题.通常涉及到特征提取(用cnn提取出图像内部不为人类感知的向量特征)和语言模型建立.为图像提取文字 ...

  7. 关于loadrunner运行场景时提示“初始化失败,通信错误”的解决方案

    1)在loadrunner的安装目录下的bin文件夹下有个“wlrun.exe”的文件 2)右键点击“属性”->"兼容性"->兼容模式中选择“windows xp(se ...

  8. cardboard sdk for unity 下载地址

    https://github.com/googlesamples/cardboard-unity

  9. Phoenix数据覆盖的一种解决方案

    最近在做实时数仓,需要兼顾离线和实时两种查询方式,大致的方案是数据通过binlog抽取,经Phoenix插入,hive映射hbase表:Phoenix创建索引,实时查询Phoenix:离线查询hive ...

  10. (DP ST表 线段树)51NOD 1174 区间中最大的数

    给出一个有N个数的序列,编号0 - N - 1.进行Q次查询,查询编号i至j的所有数中,最大的数是多少.   例如: 1 7 6 3 1.i = 1, j = 3,对应的数为7 6 3,最大的数为7. ...