响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例5-5 Canvas 绘制三角形

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas 绘制三角形</title>
</head><body><canvas id="cavsElem">您的浏览器不支持Canvas,请升级浏览器</canvas>
<script>var canvas = document.getElementById('cavsElem');             //获取画布var context = canvas.getContext('2d');                        //获取上下文对象//设置标签的宽、高和边框                      canvas.width = 400;canvas.height = 400;canvas.style.border = '1px solid #000';//绘制三角形context.beginPath();                                          //开始路径context.moveTo(100,100);                                      //定义初始位置context.lineTo(300,300);                                      //定义连接端点context.lineTo(100,300);                                      //定义连接端点context.closePath();                                          //结束路径context.stroke();                                             //描边路径context.fill();                                               //三角形的填充效果
</script>
</body>
</html>

上述代码中:
使用了JavaScript为画布设置了宽、高和边框,然后通过坐标确定了三角形的三个点,规划了绘制路径,最后进行描边操作,成功绘制了一个填充效果为黑色的三角形。

运行效果

在这里插入图片描述
删除第24行代码context.fill(); 取消三角形的黑色填充效果。在这里插入图片描述

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

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

相关文章

最快最便捷的pytest使用allure测试报告

一、前言 最近通过群友了解到了allure这个报告&#xff0c;开始还不以为然&#xff0c;但还是逃不过真香定律。 经过试用之后&#xff0c;发现这个报告真的很好&#xff0c;很适合自动化测试结果的展示。下面说说我的探索历程吧。 选用的项目为Selenium自动化测试Pytest框架…

k8s的operator基石:controller-runtime源码解析

写在之前 今天开始开更controller-runtime的源码阅读&#xff0c;笔者建议大家在阅读前了解以下知识&#xff0c;可能会帮助大家更好的理解源码逻辑。 1.client-go的基础使用 2. 使用kubebuilder搭建一个简单的controller-runtime环境 3.informer的基本思想 1.源码环境搭建 参…

代理模式(静态代理、JDK 动态代理、CGLIB 动态代理)

代理模式(静态代理、JDK 动态代理、CGLIB 动态代理) 一、代理模式概述1. 生活中的代理案例2. 为什么要使用代理3. 代理模式在 Java 中的应用4. 概述5. 生活中代理图示二、代理的实现方式1. Java 中代理图示2. 静态代理2.1 案例2.2 实现案例2.3 静态代理存在的问题三、动态代理…

SpringBoot的默认组件扫描

本篇博客主要探究&#xff1a;为什么SpringBoot项目中我们没有配置组件扫描的包&#xff0c;为什么它会默认扫描启动类所在的包&#xff1f; 一、访问与启动类所在同一包下的接口 我们先来看一个简单的接口&#xff1a; 我们可以观察到&#xff0c;HelloController这个类处在…

福布斯财富增长榜前十富豪身价暴增3.5万亿!他们致富的秘诀究竟是?

按照《福布斯》最新的数据显示&#xff0c;今年全球前十位财富增长最多的富豪的身家总共增加了4900亿美元&#xff08;约3.5万人民币&#xff09;&#xff0c;大家可能对于3.5万亿没什么概念&#xff0c;但是换算一下&#xff0c;中国一共才14亿人&#xff0c;如果把这3.5万亿平…

jenkins部署(docker)

docker部署&#xff0c;避免安装tomcat 1.拉镜像 docker pull jenkins/jenkins2.宿主机创建文件夹 mkdir -p /lzp/jenkins_home chmod 777 /lzp/jenkins_home/3.启动容器 docker run -d -p 49001:8080 -p 49000:50000 --privilegedtrue -v /lzp/jenkins_home:/var/jenkins_…

Python爬虫的简单实践

Python爬虫的简单实践 案例&#xff1a;爬取电商网站商品信息 目标网站&#xff1a;假设我们想要爬取一个电商网站上的商品信息&#xff0c;包括商品名称、价格、评论数量等。 实现过程&#xff1a; 网页请求&#xff1a;使用Python的请求库&#xff08;例如Requests&#…

BUUCTF-Real-[PHP]XXE

目录 1、原理 2、XXE漏洞产生的原因 3、开始复现 paylaod 复现 4、flag 1、原理 XML数据在传输过程中&#xff0c;攻击者强制XML解析器去访问攻击者指定的资源内容&#xff08;本地/远程&#xff09;&#xff0c;外部实体声明关键字SYSTEM会令XML解析器读取数据&#xf…

洛谷P1162填涂颜色

填涂颜色 题目描述 由数字 0 0 0 组成的方阵中&#xff0c;有一任意形状的由数字 1 1 1 构成的闭合圈。现要求把闭合圈内的所有空间都填写成 2 2 2。例如&#xff1a; 6 6 6\times 6 66 的方阵&#xff08; n 6 n6 n6&#xff09;&#xff0c;涂色前和涂色后的方阵如下&…

在前端开发中,常见的数组循环方式有以下几种:

在前端开发中&#xff0c;常见的数组循环方式有以下几种&#xff1a; for 循环&#xff1a;使用最传统的 for 循环来遍历数组元素。 const array [1, 2, 3, 4, 5];for (let i 0; i < array.length; i) {console.log(array[i]); }forEach() 方法&#xff1a;使用数组的 …

【Axure教程0基础入门】00Axure9汉化版下载、安装、汉化、注册+01制作线框图

写在前面&#xff1a;在哔哩哔哩上面找到的Axure自学教程0基础入门课程&#xff0c;播放量最高&#xff0c;5个多小时。课程主要分为4个部分&#xff0c;快速入门、动态面板、常用动效、项目设计。UP主账号【Song老师产品经理课堂】。做个有素质的白嫖er&#xff0c;一键三连必…

【C/C++】深入理解--函数重载(什么是函数重载?为什么要有函数重载?)

目录 一、前言 二、 函数重载 &#x1f34e;什么是函数重载 &#x1f350;函数重载的条件 &#x1f347;函数重载的注意点 &#x1f349;为什么要有函数重载 &#x1f353;为何C语言不支持函数重载&#xff0c;反倒C可以&#xff1f; &#x1f4a6; Linux环境下演示函数重…

Python常用库

一、爬虫 Requests&#xff1a;是一个Python HTTP库&#xff0c;可以用于发送HTTP请求&#xff0c;支持HTTP/1.1和HTTP/2&#xff0c;适合于爬取简单的网页。 BeautifulSoup&#xff1a;是一个HTML/XML解析库&#xff0c;可以用于解析网页内容&#xff0c;提取出需要的信息。…

Cocos creator 动作系统

动作系统简介 是用于控制物体运动的一套系统&#xff0c;完全依赖代码进行实现&#xff0c;动态调节节点的移动。 移动 cc.moveTo 移动到某个坐标&#xff08;x,y&#xff09; //1秒时间内&#xff0c;移动到0,0let action1 cc.moveTo(1,0,0)this.node.runAction(action1)c…

基于单片机的烟草干燥温度控制系统设计

摘 要&#xff1a;烟草干燥研究一直备受国内外烟草工作者的重视&#xff0c;在烟草干燥的方法中热风管处理法是利用热空气对流使烟草达到干燥的效果&#xff0c;这样可以控制烟草干燥时的温度&#xff0c;使烟草能够更好更快地干燥&#xff0c;因此温度的检测和控制是很重要的。…

LeetCode 第二十一天

530. 二叉搜索树的最小绝对差 注意掌握中序遍历的迭代写法。 class Solution { public:int preValue -1;int MinAbs INT_MAX;void traversal(TreeNode* root){// 第一次写出新的递归题目 耶耶耶if (root nullptr) return;traversal(root->left);// 上一章卡尔给出的好方…

写静态页面——浮动练习

0、效果&#xff1a; 1、html代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>浮动…

Mongodb投射中的$slice,正向反向跳过要搞清楚

在投射中&#xff0c;使用$操作符和$elemMatch返回数组中第一个符合查询条件的元素。而在投射中使用$slice, 能够返回指定数量的数组元素。 定义 投射中使用$slice命令&#xff0c;指定查询结果中返回数组元素的数量。 语法 db.collection.find(<query>,{<arrayFi…

C++-类和对象(2)

目录 5.类的作用域 6.类的实例化 7.类对象模型 7.1 如何计算类对象的大小 7.2 类对象的存储方式猜测 1.对象中包含类的各个成员 ​编辑 2.代码只保存一份&#xff0c;在对象中保存存放代码的地址 ​编辑 3.只保存成员变量&#xff0c;成员函数存放在公共的代码段 ​编辑…

C++进阶(八)红黑树

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、红黑树的概念二、红黑树的性质三、红黑树结构四、红黑树的插入操作1、情况一2、情况二3、…