<!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. SQL CASE 多条件用法

    Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex          WHEN '1' THEN '男'          WHEN '2' THEN ...

  2. POST—GET—两种提交方式的区别

        主要区别: 安全性 长度限制 数据结构.   总结起来: get方式:以URL字串本身传递数据参数,在服务器端可以从UERY_STRING'这个变量中直接读取,效率较高,但缺乏安全性,也无法来 ...

  3. 有关padding的二三事~~

    浏览器支持 所有浏览器都支持 padding 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit". 定义和用法 pa ...

  4. Intro to Python for Data Science Learning 4 - Methods

    Methods From:https://campus.datacamp.com/courses/intro-to-python-for-data-science/chapter-3-function ...

  5. linux常用命令：grep 命令

    Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Print,表示全局正则表达 ...

  6. Windows10 64位下安装TensorFlow谷歌人工智能系统已官方原生支持

    Windows10 64位下安装TensorFlow谷歌人工智能系统已官方原生支持 GitHub - tensorflow/tensorflow: Computation using data flo ...

  7. 利用构造函数对canvas里面矩形与扇形的绘制进行一个封装

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

  8. 静默文件安装安装WebLogic

    一. 本文演示静默文件方式安装     •在Windows上      –打开命令行窗口 –filename.exe -mode=silent -silent_xml=file_path     •在 ...

  9. Ubuntu下使用face_recognition进行人脸识别

    Face Recognition是一个基于Python的人脸识别库,在github上地址如下:https://github.com/ageitgey/face_recognition. 看着挺好玩,本 ...

  10. Win32 消息响应顺序

    如果窗口处理函数响应了 WM_RBUTTONUP后,不会响应WM_CONTEXTMENU消息了.