<!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. window下安装多个tomcat

    解压该压缩包,生成3分tomcat 分别命名为 tomcat1,tomcat2,tomcat3 进入tomcat1/conf/目录,修改server.xml 进入tomcat1/bin目录,修改 se ...

  2. GrideView（二）---删除功能

    情景一. 没有外键关联, 操作:在数据源中将删除选项选中--- GrideView 中的删除 选项选中 即可情景二. 有外键关联 *RowDeleting 行删除前触发 *RowDeleted 行删除 ...

  3. UVA11419 SAM I AM —— 最小点覆盖 + 输出覆盖点集

    题目链接:https://vjudge.net/problem/UVA-11419 题解: 1.二分图匹配之最小点覆盖.:把x坐标和y坐标看成是点, 图中的目标看成是边,所以最终的目的是求出用最少的点 ...

  4. Iphone 启动图的尺寸

    APP图标设置 - 取Images.xcassets中的AppIcon, 图标尺寸 29pt * 2x => 58 * 5829pt * 3x => 87 * 8740pt * 2x =& ...

  5. MySQL 一对多查询，合并多的一方的信息

    select   c.name,  (select   group_concat(name) from student   s   where  s.class_id =c.id ) from  cl ...

  6. Thinkpad x230设置启动顺序

    设置可以从CD或者USB启动1.F1进入BIOS,Security → Secure Boot ,设置为:Disabled2.Startup → UEFI/Legacy Boot ,设置为:Both( ...

  7. MFC显示文本文档 分类： MFC 2014-12-30 10:03 457人阅读 评论(1) 收藏

    新建基于对话框的MFC应用程序.资源视图的对话框上添加编辑框(Edit Control)和按钮(Button), 将编辑框属性:Mutiline.Auto HScroll.Auto VScroll设为 ...

  8. Matlab实现Hough变换检测图像中的直线 分类： 图像处理 2014-06-14 22:07 641人阅读 评论(0) 收藏

    Hough变换的原理: 将图像从图像空间变换至参数空间,变换公式如下: 变换以后,图像空间与参数空间存在以下关系: 图像空间中的一点在参数空间是一条曲线,而图像空间共线的各点对应于参数空间交于一点的各 ...

  9. 179 Largest Number 把数组排成最大的数

    给定一个非负整数的列表,重新排列它们的顺序把他们组成一个最大的整数.例如,给定 [3, 30, 34, 5, 9],最大的组成数是 9534330.注意: 结果可能非常大,所以您需要返回一个字符串而不 ...

  10. 1272 最大距离 只想到了dp

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1272 离散化后,用dp[i]表示向右,大于等于i这个数字的最大位置 dp ...