php绘制一个三角形,如何利用css或html5画出一个三角形?两种不同的制作三角形方法(代码实例)...

我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形。那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的制作三角形方法(代码实例)。让大家知道如何用纯css代码实现三角形的绘制,或者使用html5是如何画三角形的。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一、利用css的border属性,即可实现三角形的绘制

代码:border 属性--绘制三角形

效果图:

利用css的border属性实现三角形的原理:css盒模型

一个盒子模型包括: margin+border+padding+content,上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等.调整宽度大小可以调节三角形形状..demo {

height:20px;

width:20px;

border-color:#FF9600 #3366ff #12ad2a #f0eb7a;

border-style:solid;

border-width:20px;

}

效果图:

二、利用html5的canvas画布,即可实现三角形的绘制canvas-绘制三角形

浏览器不支持canvas

《script》

window.οnlοad=function () {

var canvas=document.getElementById("canvas");//获取canvas对象

var ctx=canvas.getContext("2d"); //创建二维的绘图上下文对象

ctx.beginPath();

ctx.linewidth=20;

ctx.lineJoin="round"; //两条线交汇时的边角类型(miter 尖角默认 bevel斜角 round 圆角 )

ctx.moveTo(10,10);

ctx.lineTo(110,10);

ctx.lineTo(60,50);

ctx.closePath(); //closePath() 关闭路径 闭合

ctx.strokeStyle="blue";// strokeStyle 只能填充该路径的颜色

ctx.fillStyle="red";// fillStyle 填充字体颜色、填充路径区域、图形区域

ctx.fill();// fill() 填充字体

ctx.stroke();

}

《script》

效果图:

利用html5的canvas画布,即可实现三角形绘制的重点:

三角形在画布中的三个坐标:moveTo(10,10)----左上角坐标,ctx.lineTo(110,10)-----右上角 坐标, ctx.lineTo(60,50)----下面坐标

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370332.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

课时53.video标签(掌握)

这节课来学习一下html5中新增的标签,我们先来看一下,html5中新增了哪些标签? 打开W3school的网页,点击参考手册中的HTML/HTML5标签,有一个按字母顺序排列的标签,但凡标签后面带有5标记的,都是h…

Date函数基础知识整理

Date类型&#xff1a;1.Date.parse()接收一个表示日期的字符串参数&#xff0c;然后再根据这个字符串返回响应的日期的毫秒数&#xff1b;如&#xff1a;创建一个日期&#xff1a; 1 <script> 2 // var someDatenew Date(May 25,2004); 3 // console.log(someDate);//Tue…

Google Guava –与Monitor同步

Google Guava项目是每个Java开发人员都应该熟悉的库的集合。 Guava库涵盖I / O&#xff0c;集合&#xff0c;字符串操作和并发性。 在这篇文章中&#xff0c;我将介绍Monitor类。 Monitor是一种同步构造&#xff0c;可以在使用ReentrantLock的任何地方使用。 在任何时候&#x…

yaf 重写index.php,php框架Yaf路由重写实例代码

通常为了友好的URL格式&#xff0c;会进行站点URL的重写&#xff0c;可以在webserver(Nginx)的配置中进行rewrite&#xff0c;也可在在程序端进行&#xff0c;本文主要和大家介绍php框架Yaf路由重写&#xff0c;给大家做个参考&#xff0c;希望能帮助到大家。以下使用Yaf框架进…

python类初始化导入库_Python中optparser库用法实例详解

本文研究的主要是Python中optparser库的相关内容&#xff0c;具体如下。一直以来对optparser不是特别的理解&#xff0c;今天就狠下心&#xff0c;静下心研究了一下这个库。当然了&#xff0c;不敢说理解的很到位&#xff0c;但是足以应付正常的使用了。废话不多说&#xff0c;…

SQL--Chapter8--Working with Triggers and Transactions

Objectives:1.Implement triggers 2.Implement transactions 转载于:https://www.cnblogs.com/Catherinezhilin/p/7979644.html

Canvas制作的下雨动画

简介 在codepen上看到一个Canvas做的下雨效果动画&#xff0c;感觉蛮有意思的。就研究了下&#xff0c;这里来分享下&#xff0c;实现技巧。效果可以见下面的链接。 霓虹雨: http://codepen.io/natewiley/full/NNgqVJ/ 效果截图&#xff1a; Canvas动画基础 大家都知道&…

在Eclipse中有效使用JUnit

最近&#xff0c;我被卷入了讨论1和一些受感染的同伴2&#xff0c;他们关于我们如何在Eclipse IDE中使用JUnit 。 令人惊讶的是&#xff0c;对话带来了并非所有人都知道的一些“技巧”。 这使我有了写这篇文章的想法&#xff0c;总结了我们的演讲。 谁知道–也许有人也有新事物…

jquery文件上传控件 Uploadify

基于jquery的文件上传控件&#xff0c;支持ajax无刷新上传&#xff0c;多个文件同时上传&#xff0c;上传进行进度显示&#xff0c;删除已上传文件。 要求使用jquery1.4或以上版本&#xff0c;flash player 9.0.24以上。 有两个版本&#xff0c;一个用flash,一个是html5。html5…

imagick php 缩放,php使用imagick模块实现图片缩放、裁剪、压缩示例

PHP 使用Imagick模块 缩放&#xff0c;裁剪&#xff0c;压缩图片 包括gif图片缩放 裁剪代码如下:/*** 图片裁剪* 裁剪规则&#xff1a;* 1. 高度为空或为零 按宽度缩放 高度自适应* 2. 宽度为空或为零 按高度缩放 宽度自适应* 3. 宽度&#xff0c;高度到不为空或为…

php实现第三方邮箱登录_PHP实现用户异地登录提醒功能的方法

有时候你的网站账号被盗或你在别处登录操作后台时&#xff0c;右下角会弹出提示信息&#xff0c;提醒你的账号异地登录&#xff0c;或者会被强制下线。对于这种安全性要求比较高的web网站&#xff0c;很多后台管理都会做这种功能提醒。甄别自己的账号是否被盗或者是否有另一个人…

课时47.datalist标签(了解)

1.datalist标签 作用&#xff1a;给输入框绑定待选项 2.datalist格式&#xff1a; <datalist> <option>待选项内容</option> </datalist> 3.如何给输入框绑定待选列表&#xff1f; 搞一个输入框搞一个datalist列表给datalist列表标签添加一个id给…

pandas.read_csv参数详解

读取CSV&#xff08;逗号分割&#xff09;文件到DataFrame也支持文件的部分导入和选择迭代更多帮助参见&#xff1a;http://pandas.pydata.org/pandas-docs/stable/io.html参数&#xff1a;filepath_or_buffer : str&#xff0c;pathlib。str, pathlib.Path, py._path.local.Lo…

Gradle – Maven的观点

正如我博客的读者所知道的&#xff0c; 我有点像Maven迷 。 我从2007年8月左右开始使用Maven&#xff0c;从没有回过头。 但是&#xff0c;就像其他所有情况一样&#xff0c;“变化是唯一不变的”。 现在这个领域还有其他参与者&#xff0c;Gradle看起来是最有前途的。 我决定试…

postgis安装_从零开始,构建电子地图网站:0_2_数据处理postgis

软件安装完&#xff0c;开始数据处理。从China Historical GIS下载一份数据。一、数据下载数据来源&#xff1a;China Historical GIS&#xff1a;https://sites.fas.harvard.edu/~chgis/data/chgis/v6/先下载一份时间序列数据&#xff1a;Download CHGIS V6 TIME SERIES Datah…

sar图像去噪matlab,一种基于总曲率的SAR图像变分去噪方法与流程

本发明属于数字图像处理技术领域&#xff0c;具体涉及一种基于总曲率的SAR图像变分去噪方法。背景技术&#xff1a;&#xff1a;相干斑噪声是合成孔径雷达(Synthetic Aperture Radar&#xff0c;简称SAR)图像的重要特征&#xff0c;严重影响SAR图像的可解译性。相干斑噪声通常作…

Linux下用netstat查看网络状态、端口状态

在linux一般使用netstat 来查看系统端口使用情况步。 netstat命令是一个监控TCP/IP网络的非常有用的工具&#xff0c;它可以显示路由表、实际的网络连接以及每一个网络接口设备的 netstat命令的功能是显示网络连接、路由表和网络接口信息&#xff0c;可以让用户得知目…

课时2.浏览器和服务器(了解)

1.什么是浏览器&#xff1f; 浏览器就是由安装在我们电脑上的一款软件&#xff0c;QQ&#xff0c;百度影音等一样&#xff0c;都是安装在电脑上的一款软件 那这些软件之间由什么区别呢&#xff1f; 它们的区别就是它们的功能不太一样&#xff0c;QQ是用来聊天的&#xff0c;…

微信自动回复

http://itchat.readthedocs.io/zh/latest/tutorial/tutorial0/。 这个是学习网址&#xff0c;到时候自己学一下。做个案例试试转载于:https://www.cnblogs.com/lilinzhiyu/p/7985864.html

python 定义变量_用python解决动态的定义变量名(并给其赋值方法:大数据处理)...

前言&#xff1a;今天为大家带来的内容是&#xff1a;用python解决动态的定义变量名(并给其赋值方法&#xff1a;大数据处理)具有很好的参考价值&#xff0c;希望对大家有所帮助。喜欢本文内容的记得点赞转发收藏不迷路哦&#xff01;&#xff01;&#xff01;最近消费kafka数据…