<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

 </head>

 <body>

<canvas id="canvas" width="500" height="500" style="background-color: yellow;"></canvas>

 <script>

var c=document.getElementById("canvas");

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

cxt.beginPath();

cxt.moveTo(250,50);

cxt.lineTo(200,200);

cxt.lineTo(300,300);

cxt.closePath();//填充或闭合 需要先闭合路径才能画

//空心三角形

cxt.strokeStyle="red";

cxt.stroke();

//实心三角形

cxt.beginPath();

cxt.moveTo(350,50);

cxt.lineTo(300,200);

cxt.lineTo(400,300);

cxt.closePath();

cxt.fill();

</script>

 </body>

</html>

　　

使用canvas画三角形的更多相关文章

  1. 用canvas画三角形的方法

    <canvas id="favoriteRectangle" width="30" height="30"></canva ...

  2. Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形) .

    1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, ...

  3. Android利用canvas画各种图形 及Paint用法 .

    引自:http://blog.csdn.net/carlfan/article/details/8139984 1.首先说一下canvas类: Class Overview The Canvas cl ...

  4. canvas画多边形

    <canvas id = "myCanvas" width = '500' height = '500'> Canvas画正多边形 </canvas>< ...

  5. 使用H5 canvas画一个坦克

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

  6. WebGl 利用drawArrays、drawElements画三角形

    效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  7. Android利用canvas画各种图形

    Android利用canvas画各种图形(点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形) 本文链接:https://blog.csdn.net/rhljiayou/article/det ...

  8. 在echart组件下用canvans画三角形

    //使用的canvans绘制的三角形 drawArrow(){ var canvas = document.createElement('canvas');//创建一个元素 canvas.width ...

  9. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

随机推荐

  1. AWS邮件通知服务：实时监控邮件状态

    以下为译文: 订阅“AWS中文技术社区”微信公众号,实时掌握AWS技术及产品消息! AWS中文技术社区为广大开发者提供了一个Amazon Web Service技术交流平台,推送AWS最新资讯.技术视 ...

  2. Jmeter CSV Data Set Config参数化

    在使用Jemeter做压力测试的时候,往往需要参数化用户名,密码以到达到多用户使用不同的用户名密码登录的目的.这个时候我们就可以使用CSV Data Set Config实现参数化登录: 首先通过Te ...

  3. HDU 1432 Lining Up（几何）

    http://acm.hdu.edu.cn/showproblem.php?pid=1432 题目大意: 2维平面上给定n个点,求一条直线能够穿过点数最多是多少. 解题思路: 因为题目给定的n(1~7 ...

  4. http-equiv="Refresh" 实现定时刷新页面

    ***.html自动跳转文件代码如下: <HTML> <HEAD><META http-equiv="Refresh" content="5 ...

  5. 常用jquery记录

    1.jquery easing jQuery Easing是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用 ...

  6. Instruments(性能调优 12.3)

    Instruments Instruments是Xcode套件中没有被充分利用的一个工具.很多iOS开发者从没用过Instruments,或者只是用Leaks工具检测循环引用.实际上有很多Instru ...

  7. Hadoop学习之路（二十四）YARN的资源调度

    YARN 1.1.YARN 概述 YARN(Yet Another Resource Negotiator) YARN 是一个资源调度平台,负责为运算程序提供服务器运算资源,相当于一个分布式的操 作系 ...

  8. firefox历史版本下载链接

    http://ftp.mozilla.org/pub/firefox/releases firefox版本42以上的用不了firebug,需要装版本42以下的,否则用不了

  9. B轮公司技术问题列表

    B轮公司技术问题列表 1.异构系统的接口对接我们有自己的一套统一接口,但是需要与其它公司的接口做对接,但是各个公司的接口各不相同,有什么好的方式能够方便与各公司的接口做对接的同时我们这边也能尽量少或者 ...

  10. 精力管理 | 迅速恢复精力的N个技巧，四个关键词以及自我管理的方法和工具列表

    精力管理 | 迅速恢复精力的N个技巧,所谓坚持,是坚定的“持有”,这个“持”字很值得琢磨——不是扛.不是顶,而是“持”这样一个半放松的状态.如果你没做好自己该做的事情,如果你自己没有成长起来,随着年龄 ...