<!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. 全局Timestamp管理器 检测js执行时间

    随手写了个小工具,主要为了测试不同混淆程度的javascript脚本的加载速度1. [代码]Timestamp.js (function() { if (typeof this.Timestamp = ...

  3. 有向图强连通分量的Tarjan算法（转）

    [有向图强连通分量] 在有向图G中,如果两个顶点间至少存在一条路径,称两个顶点强连通(strongly connected).如果有向图G的每两个顶点都强连通,称G是一个强连通图.非强连通图有向图的极 ...

  4. 网页动画插件---Super Scrollorama , TweenMax 和skrollr

    SuperScrollorama 是一个用来实现超酷的滚动动画效果的 jQuery 插件. 实现的效果有:文字褪色,飞,旋转,缩放,斯马什,针脚,滑动,隐退,反弹,颜色,扔,移动,视差. 地址:htt ...

  5. mac系统下如何删除银行安全插件

    要分类解决了,一般safair插件都是pkg包安装的 如果:1.制作者够良心,PKG安装包中植入了删除卸载功能,那就好办了,打开当时安装的pkg包,执行删除选项 2.没良心的,装了不好删的,我目前个人 ...

  6. 【转】Echarts的使用以及动态加载数据

    一.Echarts的介绍 ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新 ...

  7. Wait示例分析

    wait方法使"当前线程"进入阻塞(等待)状态. 示例分析: public class TestWait { public static void main(String[] ar ...

  8. hdu4888 Redraw Beautiful Drawings（最大流）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4888 题意:给一个矩阵没行的和和每列的和,问能否还原矩阵,如果可以还原解是否唯一,若唯一输出该矩阵. ...

  9. bzoj 1742: [Usaco2005 nov]Grazing on the Run 边跑边吃草【区间dp】

    挺好的区间dp,状态设计很好玩 一开始按套路设f[i][j],g[i][j]为吃完(i,j)区间站在i/j的最小腐败值,后来发现这样并不能保证最优 实际上是设f[i][j],g[i][j]为从i开始吃 ...

  10. USACO Training3.3 A Game【区间Dp】 By cellur925

    题目传送门 一股浓浓的博弈论香气...然而本蒟并不会博弈论. 开始用双端队列+假的dp水过了24pts水数据. 其实是布星的,两人都绝顶聪明会深谋远虑不像我只看眼前,所以上述算法错误. 正解:区间dp ...