用canvas画一个五星红旗

已于 2022-02-09 17:33:34 修改
阅读量1.1k 收藏 5
点赞数
于 2021-12-05 21:57:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49266584/article/details/121736407
版权

HTML5 Canvas 图形绘制 五星红旗 JavaScript
关键词由CSDN通过智能技术生成

利用canvas画一个好看的五星红旗！！！
简单，容易上手！

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
    <title>五星红旗</title>
</head>

<body onload="draw()">
<canvas id="myCanvus" width="300px" height="200px" style="border:1px dashed black;">
</canvas>
</body>
</html>
<script type="text/javascript">
    <!--
    function draw(){
        var canvas=document.getElementById("myCanvus");
        var context=canvas.getContext("2d");

        context.fillStyle = "red";
        context.fillRect(0, 0, 300, 200);

        context.strokeStyle = "yellow";
        context.fillStyle = "yellow"
        var r;

        context.save();

        context.translate(25,25);

        r=30;
        context.beginPath();
        context.moveTo(r, 0);
        context.lineTo(r+Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
        context.lineTo(r-Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
        context.lineTo(r+Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
        context.lineTo(r-Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
        context.lineTo(r, 0);
        context.fill();
        context.stroke();
        context.closePath();

        context.restore();

        context.save();
        context.translate(100,10);
        r=10;
        context.beginPath();
        context.moveTo(r, 0);
        context.lineTo(r+Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
        context.lineTo(r-Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
        context.lineTo(r+Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
        context.lineTo(r-Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
        context.lineTo(r, 0);
        context.fill();
        context.stroke();
        context.closePath();

        context.restore();

        context.save();
        context.translate(120,30);
        r=10;
        context.beginPath();
        context.moveTo(r, 0);
        context.lineTo(r+Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
        context.lineTo(r-Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
        context.lineTo(r+Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
        context.lineTo(r-Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
        context.lineTo(r, 0);
        context.fill();
        context.stroke();
        context.closePath();

        context.restore();

        context.save();
        context.translate(120,60);
        r=10;
        context.beginPath();
        context.moveTo(r, 0);
        context.lineTo(r+Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
        context.lineTo(r-Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
        context.lineTo(r+Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
        context.lineTo(r-Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
        context.lineTo(r, 0);
        context.fill();
        context.stroke();
        context.closePath();

        context.restore();

        context.save();
        context.translate(100,80);
        r=10;
        context.beginPath();
        context.moveTo(r, 0);
        context.lineTo(r+Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
        context.lineTo(r-Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
        context.lineTo(r+Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
        context.lineTo(r-Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
        context.lineTo(r, 0);
        context.fill();
        context.stroke();
        context.closePath();
    }

    function getRad(degree){
        return degree/180*Math.PI;
    }
    //-->
</script>

在这里插入图片描述

努力的耿耿努力
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
史上最详细的使用canvas绘制五星红旗的方法
qq_39155611的博客
06-12 2826
史上最详细的使用canvas绘制五角星的方法 昨天我们在课堂上讲到了HTML5中的canvas标签，canvas标签用于绘制图像（通过脚本，通常是 JavaScript）。当天布置的作业就是利用canvas画布绘制五星红旗。如图： 上篇文章我们已经讲到了五星红旗的制法说明。 （一）旗面为红色，长方形，其长与高为三与二之比，旗面左上方缀黄色五角星五颗。一星较大，其外接圆直径为旗高十分之三，居左；四星较小，其外接圆直径为旗高十分之一，环拱于大星之右。旗杆套为白色。 （二）五星之位置与画法如下: 为便于确定五
Canvas详解
发果叁
05-23 3万+
一、canvas 简介 1.1 什么是 canvas？（了解） 是 HTML5 提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆布 画布 Canvas 是一个矩形区域的画布，可以用 JavaScript 在上面绘画。控制其每一个像素。 canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 HTML5 之前的 web 页
html5绘制五星红旗代码,html5:使用canvas绘制五星红旗
weixin_29094979的博客
06-09 1501
之前在使用canvas绘制adidas商标的时候就想过画五角星，现在来实现愿望了，画个五星红旗。虽然用svg比canvas好实现，但是现在canvas的应用比svg多，浏览器的支持也更好，所以不能放下canvas。这几周在mozilla学了点canvas的教程，学完了总该来应用下，好了废话不多说，点击观看演示function draw() {var ctx = document.getElemen...
【Canvas与艺术】 绘制五星红旗
一念非凡(46岁待业程序员)
04-28 868
使用HTML5/Canvas绘制中国五星红旗。
网页设计五星红旗html,HTML5 Canvas绘制五星红旗
weixin_28877739的博客
06-05 1326
中国标准国旗 // 使用HTML5绘制标准五星红旗 var canvas = document.getElementById("canvas");var context = canvas.getContext('2d'); var width = canvas.width;var height = width * 2 / 3; ...
国庆节，我们用代码来画个国旗～
爱编程的鱼的博客
09-29 1373
如果你刚好闲的无聊，想想以前每次放假，本来放假前想好出去干啥干啥的，最后都是窝在家里敲代码了。可能很多人还是如此，那么怎样给这一天的代码的添上一点色彩？为何不做点有意思的东西？恰巧是国庆，那就让我们以一种不同的方式来庆祝她。庆祝祖国的67岁生日。让我们用不同的语言来编织我们的五星红旗……第一个：HTML + JavaScript。第三个：Python（版本是2.7）
JS+canvas画一个圆锥实例代码
01-19
我的第一个 HTML 页面</title> </head> <body> <canvas id='cvs' width='1000' height=800> </canvas> [removed] const cvs =document.getElementById('cvs'); // 计算画布的宽度 const width =...
canvas实现一个简易画板
04-18
在前端开发中，Canvas是一个非常重要的元素，它允许开发者通过JavaScript来绘制图形，实现动态的、交互式的网页内容。本文将深入探讨如何使用JavaScript和HTML5的Canvas API来创建一个简易画板，并介绍如何将画板上...
html5使用canvas画一条线
09-28
Canvas API提供了一个2D渲染上下文，我们可以用它来进行绘画操作。通过调用`getContext`方法并传入参数`'2d'`，我们可以得到这个2D渲染上下文： ```javascript var cxt = canvas.getContext('2d'); ``` 有了2D渲染...
基于canvas画一个太极图
04-29
基于canvas画一个太极图
canvas绘制中国国旗！
Wsh20210301的博客
05-23 2559
绘制中国国旗 1、题目 今天刚学了H5中的画布canvas元素，课堂上的案例挺有意思，就心血来潮想利用canvas绘制中国国旗； 2、思路 第一步，创建画布元素，在画布内作好辅助线和网格线来确定圆的位置； 第二步，作好网格线后，我们先定好大圆的坐标和小圆的坐标； 第三步，绘制出一个大圆和四个小圆； 第四步，在大圆内绘制出五角星，和在第一个小圆内画出五角星，旋转画布为固定的弧度值绘制出其他三个小五角星，并且将大五角星和四个小五角星的元素填充至黄色（外边轮廓默认为黑色）； 第五步，五星红旗绘制完毕，取消辅
Canvas 从入门到劝朋友放弃（图解版）✨
weixin_39415598的博客
07-23 984
本文简介 点赞 + 关注 + 收藏 = 学会了 在前端领域，如果只是懂 Vue 或者 React ，未来在职场的竞争力可能会比较弱。 根据我多年在家待业经验来看，前端未来在 数据可视化 和 AI 这两个领域会比较香，而 Canvas 是数据可视化在前端方面的基础技术。 本文就用光的速度将 canvas 给入门了。 要入门一个技术，前期最重要是快！所以本文只讲入门内容，能应付简单项目。深入的知识点会在其他文章讲解。 Canvas 是什么？ Canvas 中文名叫 “画布”，是 HTML5 新增
canvas基本用法
编程界明世隐的博客
01-14 1万+
首先创建canvas元素 <canvas id="canvas" width="150" height="150"></canvas> width和height 也可以不指定，canvas会初始化宽度为300像素和高度为150像素 可以用CSS来指定这两个值，但如果css尺寸与初始画布的比例不一致，它会出现扭曲，所以官方建议用js来设置 width和height这两个属性。 var canvas = document.getElementById('canvas'); .
学习HTML5 Canvas这一篇文章就够了
热门推荐
完善飞跃
06-16 16万+
一、canvas简介&amp;amp;lt;canvas&amp;amp;gt; 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来，有人通过Gecko内核的浏览器 (尤其是Mo
canvas
望天一方小叶子的博客
09-20 4448
canvas 只能在标签中用width。heigth修改大小 基本方法： 先得到canvas： let canvas = document.querySelector('#canvas') // 得到canvas let gd = canvas.getContext('2d')//得到canvas上下文环境 gd.moveTo(a,b): 从一个点开始绘图 gd.lineTo(c,d):绘图终...
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 232
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
VUE中的重点*
最新发布
qq_61132537的博客
07-22 371
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
jquery-选择器常见用法
随笔
07-18 198
jquery-选择器，对象下有多个子元素时如何选择
使用canvas画布绘制标准五星红旗图案
04-14
以下是使用canvas画布绘制标准五星红旗图案的代码： ``` var canvas=document.getElementById("myCanvas"); var ctx=canvas.getContext("2d"); ctx.fillStyle="#DE2910"; ctx.fillRect(0,0,400,240); ctx....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值