canvas之画一个三角形

1 <canvas id="canvas" width="500" height="500" style="background-color: yellow;"></canvas>
 1 var canvas=document.getElementById("canvas");
 2     var cxt=canvas.getContext("2d");
 3     cxt.beginPath();
 4     cxt.moveTo(250,50);
 5     cxt.lineTo(200,200);
 6     cxt.lineTo(300,300);
 7     cxt.closePath();//填充或闭合 需要先闭合路径才能画
 8     //空心三角形
 9     cxt.strokeStyle="red";
10     cxt.stroke();
11     //实心三角形
12     cxt.beginPath();
13     cxt.moveTo(350,50);
14     cxt.lineTo(300,200);
15     cxt.lineTo(400,300);
16     cxt.closePath();
17     cxt.fill();

canvas之画一个三角形

时间: 2024-08-07 06:38:33

canvas之画一个三角形的相关文章

Effective前端3:用CSS画一个三角形

三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是太麻烦.三角形其实可以用CSS画出来.如上图提到,可以分为两种三角形,一种是纯色的三角形,第二种是有边框色的三角形,先介绍最简单的纯色三角形. 1. 三角形的画法 三角形可以用border画出来,首先一个有四个border的div应该是这样的: 然后把它的高度和宽度去掉,剩下四个border,就变成了: 再把bord

Effective前端(3)用CSS画一个三角形

来源:https://zhuanlan.zhihu.com/p/26160325 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是太麻烦.三角形其实可以用CSS画出来.如上图提到,可以分为两种三角形,一种是纯色的三角形,第二种是有边框色的三角形,先介绍最简单的纯色三角形. 1. 三角形的画法 三角形可以用border画出来,首先一个有四个border的div应该是

css_画一个三角形

原理:画一个div,给div的宽高为0,给4个border属性,把其中三个隐藏就可以得到一个三角形. 很简单的一个原理,项目中可能很少用到,业余可以玩玩,其实前端蛮好玩的.可以实现各种各样的功能. css: 1 .test1 { 2 width: 0; 3 height: 0; 4 border-right: 50px solid transparent; 5 border-bottom: 50px solid blue; 6 border-left: 50px solid transparen

Effective前端1---chapter 2 用CSS画一个三角形

1.CSS画三角形的画法 第一步:三角形可以用border画出来,首先一个有四个border的div长这样: <div class="triangle"></div> <style> .triangle{ margin: 100px; border-top: 40px solid #000; border-bottom: 40px solid #333; border-left: 40px solid #666; border-right: 40px

directx学习之在屏幕上画一个三角形

前一张已经输出了一个背景为紫色的屏幕,这一节的目标是在该屏幕上输出一个三角形.下面将逐一介绍建立一个三角形的过程. 一个三角形有三个点,叫做顶点.三个点的不同的集合可以建立不同的三角形.能让GPU创建一个三角形,必须将三个顶点的位置告诉它.下面是一个2D的例子. 怎么将三个点的数据传给GPU? 在d3d10中,顶点数据被存在一个缓存资源中.但是应该申请多大的缓存,这就是接下来的问题. 一个顶点就是一个位置,通常也包含一些其他的属性,比如颜色,纹理协调等.顶点结构就定义了那些属性在内存中的位置.

Python3 Tkinter基础 Python3 Tkinter基础 Canvas create_rectangle 画一个矩形

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ ex1: code: from tkinter import * root=Tk() w = Canvas( root, width=200, height=200, background="white" ) w.pack() yellowLine = w.cre

Python3 Tkinter基础 Canvas create_rectangle 画一个矩形

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: from tkinter import * root=Tk() w = Canvas( root, width=200, height=200, background="white" ) w.pack() w.create_rectangle( 50,

用canvas画布画一个画板

前段时间,在对H5的回顾中突然对canvas有了感觉,闲来无事便对其进行了一些捯饬.这不,上周我还做了一个好玩的画板呢,废话不多说,直接上代码(PS:翠花,上代码~): HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas 制作画板</title> <style> h1

CSS画一个三角形

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con