使用canvas画三角形，圆形，半圆，八卦
2024-05-27 23:18:59
1，三角形
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><canvas id="my" width="300" height="300" style="border: 1px solid teal;"></canvas>
</body>
<script>// 获取元素var my = document.getElementById('my')// 建立画布var c = my.getContext('2d')// 开始路径c.beginPath()// 定点 先将你的笔移到0,0处c.moveTo(100, 100)//先将笔画到200,200处c.lineTo(200, 200);// 画线 将笔画到150,220处c.lineTo(150, 230)// 画线 将笔画到100,100处形成闭合的三角形// fill函数会自动闭合图形c.lineTo(100,100); 可以不写c.lineTo(100, 100)// 执行绘画.轮廓三角形// c.stroke()c.fillStyle = 'red';//改变填充颜色//填充三角形(实心)c.fill();// 关闭路径c.closePath()
</script></html>
2，圆形
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas id="my" width="300" height="300" style="border: 1px solid teal;"></canvas>
</body>
<script>// 获取元素var my = document.getElementById('my')// 建立画布var c = my.getContext('2d')// 开始路径c.beginPath()// 画圆 参数：参数1：原点x，参数2：原点y，参数3：半径，参数4：起始弧度，参数5：结束弧度，参数6：(非必填)：false顺时针，true顺时针 | 角度0代表三点钟方向。math.pi可简单认为是180°c.arc(150,150,100,0,Math.PI*2,false)//c.stroke轮廓和c.fill填充只能二选一// 更改轮廓颜色 红色c.strokeStyle='red'// 执行绘画 轮廓圆形c.stroke()// 更改填充颜色 红色// c.fillStyle='red'// 执行绘画 填充圆形 实心// c.fill()// 结束路径c.closePath()
</script>
</html>
3，半圆
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas id="my" width="300" height="300" style="border: 1px solid teal;"></canvas>
</body>
<script>// 获取元素var my = document.getElementById('my')// 建立画布var c = my.getContext('2d')// 开始路径c.beginPath()// 画圆 参数：参数1：原点x，参数2：原点y，参数3：半径，参数4：起始弧度，参数5：结束弧度，参数6：(非必填)：false顺时针，true顺时针 | 角度0代表三点钟方向。math.pi可简单认为是180°c.arc(150,150,100,0,Math.PI,false)// 如果是填充圆形可不定点和画线,轮廓圆形如果不定点和画线会造成半圆没有封闭// 定点 移动你的笔c.moveTo(250,150)// 画线c.lineTo(50,150)//c.stroke轮廓和c.fill填充只能二选一// 更改轮廓颜色 红色c.strokeStyle='red'// 执行绘画 轮廓圆形c.stroke()// 更改填充颜色 红色// c.fillStyle='red'// 执行绘画 填充圆形 实心// c.fill()// 结束路径c.closePath()
</script>
</html>
4，八卦
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><canvas id="my" width="500" height="500" style="border: 1px solid teal;"></canvas>
</body>
<script>var my = document.getElementById('my')var c = my.getContext("2d");//1.绘制最外边的大圆c.beginPath();c.arc(200, 200, 100, 0, 360 * Math.PI / 180);c.closePath();c.stroke();//2.绘制左边的实心半圆c.beginPath();c.arc(200, 200, 100, -90 * Math.PI / 180, 90 * Math.PI / 180, true);//true是逆时针，false默认值---顺时针c.closePath();c.fill();//3.绘制黑色圆c.beginPath();c.arc(200, 250, 50, 0, Math.PI * 2);c.closePath();c.fill();//4.上面的白色圆c.beginPath();c.arc(200, 150, 50, 0, Math.PI * 2);c.closePath();c.fillStyle = "#fff";c.fill();//5.绘制一黑一白圆形c.beginPath();c.arc(200, 250, 20, 0, Math.PI * 2);c.closePath();c.fill();//黑色圆c.fillStyle = "#000";c.beginPath();c.arc(200, 150, 20, 0, Math.PI * 2);c.closePath();c.fill();
</script></html>
使用canvas画三角形，圆形，半圆，八卦相关推荐
- 用canvas画一个太极图（八卦图）
用canvas画一个太极图(八卦图) 源码展示链接: https://yanhappiness.github.io/Notes/canvas_src.html 理解什么是canvas canvas是H ...
- canvas画三角形
万丈高楼平地起,从零开始,使用 canavas 画三角形 <!DOCTYPE html> <html lang="en"> <head>< ...
- CSS 画三角形、半圆、扇形、
1.三角形:元素宽高设置为0,通过border属性来设置,让其它三个方向的border颜色为透明或者和背景色保持一致,剩余一条border的颜色设置为需要的颜色,三角形的方向就设置反方向的border ...
- 【Python】青少年蓝桥杯_每日一题_9.03_画三角形和半圆相切
直接上代码: from turtle import *hideturtle() pencolor("red") fillcolor("yellow") begi ...
- canvas画圆、画带有圆角填充色的矩形
canvas画海报圆形微信头像,包括紫色背景带有圆角的矩形方法 1.画圆 2.画填充色的带有圆角的矩形
- 【css】用css画圆，半圆和三角形
用css画圆,半圆和三角形 圆,半圆 三角形 圆,半圆 // 圆 宽高相等, border-radius大于宽度的一半 .circle{width: 100px;height: 100px;backg ...
- python画椭圆形_Python3 tkinter基础 Canvas create_rectangle 画虚边的矩形 create_oval 画椭圆形 圆形...
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda : 4.5.11 typesetting : Markdown ...
- canvas画正方形、三角形以及虚线
1.画正方形 代码如下 <style>canvas {margin: 0 auto;border: 2px solid #aaa;display: block; /*画布居中*/} < ...
- 前端学习之路—用css画一个圆形，三角形，椭圆
用css画一个圆形,三角形,椭圆 一.圆形 css代码如下: <!DOCTYPE html> <html lang="en"> <head>&l ...
最新文章
- 勇士斗恶龙:没那么复杂的Js闭包(改)
- 循环体内，字符串的连接方式，使用StringBuilder的append方法进行扩展
- 使用Spring Boot和MongoDB创建REST API
- 泸州田家炳中学2021高考成绩查询,2021年泸州中考线出来了吗
- Matlab2018a安装成功后，打开出现licensing error：-8523
- POJ 1721 CARDS（置换群）
- jQuery.extend函数详细用法！[转]
- VBA实例6 CorelDraw 批量生成设备位号、连续编号
- ic 卡获取帐号apdu指令_pboc 读卡流程，apdu读卡流程
- 协会元宇宙产业园基地孵化器授牌案例：循环经济元宇宙加速基地
- 我在阿里十年：揭密阿里人才培养体系
- GitHub:git push问题remote:Support for password authentication was removed on August 13,2021.
- Java Annotation自定义注解详解
- Bat_PNG转PDF，读取系统剪切板
- win10电脑右击新建没有Word、Excel怎么办
- google使用方法及技巧
- jQuery之属性操作
- Android小应用——监控屏幕使用时间
- 永中科技破产拍卖为何无效？
- Linux如何检测到僵尸进城,如何在linux下查看僵尸进程