<!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. [LeetCode] 733. Flood Fill_Easy tag: BFS

    An image is represented by a 2-D array of integers, each integer representing the pixel value of the ...

  2. 【C语言】指向一维数组元素的指针

    本文目录 一.用指针指向一维数组的元素 二.用指针遍历数组元素 三.指针与数组的总结 四.数组.指针与函数参数 前面我们已经学习了指针,如果指针存储了某个变量的地址,我们就可以说指针指向这个变量.数组 ...

  3. MAX_STATEMENT_TIME uses confusing syntax

    From   https://bugs.mysql.com/bug.php?id=72540   [5 May 2014 18:46] Morgan Tocker Description: Via C ...

  4. redis安装及注意事项

    在linux中使用wget时,若报-bash: wget: command not found,则表明没有安装wget,需要安装,安装命令如下: yum -y install wget 安装完成即可以 ...

  5. Linux基础命令---cut

    cut 将文件中每一行的指定内容显示到标准输出. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora. 1.语法         cut [ ...

  6. pyDay2

    内容来自廖雪峰的官方网站 1.dict 为什么dict查找速度这么快?因为dict的实现原理和查字典是一样的.假设字典包含了1万个汉字,我们要查某一个字,一个办法是把字典从第一页往后翻,直到找到我们想 ...

  7. nginx作防盗链设置

    盗链是一种损害原有网站合法权益,给原网站所在服务器造成额外负担的非法行为. 盗链的实现原理: 客户端向服务器请求资源时,为了减少网络带宽,提高响应时间,服务器一般不会一次将所有资源完整地传回给客户端. ...

  8. Python Web学习笔记之TCP、UDP、ICMP、IGMP的解释和区别

    TCP与UDP解释 TCP---传输控制协议,提供的是面向连接.可靠的字节流服务.当客户和服务器彼此交换数据前,必须先在双方之间建立一个TCP连接,之后才能传输数据.TCP提供超时重发,丢弃重复数据, ...

  9. P4281 [AHOI2008]紧急集合 / 聚会

    P4281 [AHOI2008]紧急集合 / 聚会 lca 题意:求3个点的lca,以及3个点与lca的距离之和. 性质:设点q1,q2,q3 两点之间的lca t1=lca(q1,q2) t2=lc ...

  10. c++性能之对象与指针性能比较、以及java与c++性能对比实测

    为了更加直观的比较,好吧,我们选择以对象的初始化并add到list为例子. 首先,定义object如下: #include <string> #pragma once using name ...