<!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. CentOS6.5安装RHadoop

    1.首先安装依赖包(各个节点都要安装) [root@Hadoop-NN-01 ~]$ yum install gcc-gfortran #否则报”configure: error: No F77 co ...

  2. 机器学习理论基础学习3.5--- Linear classification 线性分类之朴素贝叶斯

    一.什么是朴素贝叶斯? (1)思想:朴素贝叶斯假设    条件独立性假设:假设在给定label y的条件下,特征之间是独立的    最简单的概率图模型 解释: (2)重点注意:朴素贝叶斯 拉普拉斯平滑 ...

  3. 深入浅出TCP之listen

    原文:http://blog.chinaunix.net/uid-29075379-id-3858844.html int listen(int fd, int backlog); 有几个概念需要在开 ...

  4. 9/24matplotlib简介

    Matplotlib是一个在python下实现的类matlib的纯python的三方库,旨在用python实现matlib的功能,是python下最出色的绘图库,功能很完善,其风格根matlib很相似 ...

  5. Javascript-逻辑运算符非（！）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 用python实现一个简单的socket网络聊天通讯 （Linux --py2.7平台与windows--py3.6平台）

    windows   --> windows 写法均在py3.6 客户端写法 import socket client = socket.socket() client.connect(('192 ...

  7. C/S模型之命名管道

    说明:利用管道实现服务端与客户端之间的交互.效果等同于利用socket. 命名管道(NamedPipe)是一种简单的进程间通信(IPC)机制,是服务器进程和一个或多个客户进程之间通信的单向或双向管道. ...

  8. ZOJ 3949 Edge to the Root

    题意: 在一棵树中,可以从根节点往其他节点加一条边,使得根节点到其他所有节点的距离和最小,输出最小的距离和. 思路: 我们考虑在加的一条边为$1 \to v$,那么在树上从$1 \to v$的路径上, ...

  9. centos7.3上安装oracle xe 11g

    oracle -11g-xe是数据库是免费版本,支持标准版的大部分功能.oracle XE版本也称快捷版本.是个个人学习,熟悉oracle的简化版. oracle XE做为免费的Oracle数据库版本 ...

  10. HttpClient配置SSL绕过https证书

    https://blog.csdn.net/irokay/article/details/78801307 HttpClient简介 HTTP 协议可能是现在 Internet 上使用得最多.最重要的 ...