html5 canvas画云

亦凉 2022-08-26 12:21 503阅读 0赞

使用函数画出天空的云层图像：

![云层][SouthEast]y

主要使用到的是数学的圆与弧度之间转换关系：

代码如下

//div对象  
var parentContainer = document.getElementById("container");  
  
  
(function(window) \{  
var utils = window.utils || \{\};  
window.utils = utils || window.utils;  
/\*\*  
\* 获取1-seek的随机值  
\*/  
utils.getRandom = function(seek) \{  
return parseInt(Math.random() \* seek + 1);  
\}  
utils.PI = Math.PI;  
utils.ROUND = Math.PI \* 2;

//根据弧度计算出水平位置长度  
utils.getTranslateX = function(r, radious) \{  
return parseInt(Math.abs(2 \* r \* Math.sin(90 \* radious / 180)));  
\}  
utils.drawCloud = function(container) \{  
container.moveTo(0, 80);  
var i = 0;  
var maxWidth = parentContainer.clientWidth;  
var x = 0, y = 60, x1 = 0, y1 = 60;  
//一弧度=180/pi  
container.beginPath();  
while (x <= maxWidth) \{  
var r = utils.getRandom(15);  
var radious = utils.getRandom(360) / Math.PI;  
var nextX = utils.getTranslateX(r, radious);  
container.arc(x + r, y, r, 0, radious, false);  
x += nextX;  
\}  
  
  
container.closePath();  
container.fillStyle = "white";  
container.fillRect(0, 60, maxWidth, 60);  
container.fill();  
\}  
\})(window);  
  
  
(function(window) \{  
var canvas = document.createElement("canvas");  
canvas.style.position = "absolute";  
var ctx = canvas.getContext("2d");  
parentContainer.appendChild(canvas);  
utils.drawCloud(ctx);  
  
  
//var c = document.createElement("canvas");  
//c.style.position = "absolute";  
//cx = c.getContext("2d");  
//parentContainer.appendChild(c);  
//  
//cx.fillText("00000", 70, 50, 50, 50);  
\})(window)

[SouthEast]: /images/20220824/dac6bd92862b4fb6a4a387c82f865fc4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，503人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5canvas中波浪线怎么画,html5 canvas画波浪

要实现这样的动画普通的CSS3是鞭长莫及了，只能使用Canvas。好在使用canvas也非常简单。 Step1. 新建一个画布()元素，并放在所有按钮和logo的下方以免遮

朴灿烈づ我的快乐病毒、/ 2022年10月12日 01:20/ 0 赞/ 36 阅读

相关 html5画一个圆点,HTML5 Canvas绘制圆点虚线实例

HTML5 Canvas 提供了很多图形绘制的函数，但是很可惜，Canvas API只提供了画实线的函数(lineTo)，却并未提供画虚线的方法。这样的设计有时会带来很大的不便

ゝ一世哀愁。/ 2022年10月05日 12:46/ 0 赞/ 222 阅读

相关 html5 canvas画云

使用函数画出天空的云层图像： ![云层][SouthEast]y 主要使用到的是数学的圆与弧度之间转换关系：代码如下

亦凉/ 2022年08月26日 12:21/ 0 赞/ 504 阅读

相关 HTML5中canvas画图之画圆形

利用canvas中的arc可以绘制圆形图案。函数原型为:context.arc(x,y,半径，开始角度，结束角度，是否逆时针旋转);所以可以通过修改开始角度和结束角度来绘制弧线

桃扇骨/ 2022年08月23日 05:51/ 0 赞/ 245 阅读

相关 html5＜canvas在画布上画视频和图片>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

爱被打了一巴掌/ 2022年06月15日 07:25/ 0 赞/ 431 阅读

相关【html5每日练习】html5 canvas画线

现在网络最火的是html5，没有之一，虽然正式版还没有出，但咱们可以期待着在未来几年，html5会霸占了互联网，所以毫无疑问得加入到html5的学习之中，谁学得快，谁就有可能把

港控/mmm°/ 2022年06月13日 10:50/ 0 赞/ 264 阅读

相关 [html5 canvas]用html5的canvas画一个可移动的方块

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

灰太狼/ 2022年04月18日 04:48/ 0 赞/ 393 阅读

相关通过Html5 Canvas画柱状图

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 离开园子一年多了，现在回来了。问我去哪里了？哈哈，其实哪

Myth丶恋晨/ 2022年01月16日 08:15/ 0 赞/ 430 阅读

相关画圆角 - HTML5 Canvas 作图

2、function DrawAOBArc(Canvas,A,O,B,Radius) 功能：[画圆角][Link 1] 参数：Radius：[圆角][Link 1]的大

冷不防/ 2021年12月05日 16:10/ 0 赞/ 399 阅读

相关用HTML5的canvas标签画虚线

原生代码 function drawDashLine(ctx, x1, y1, x2, y2, dashLength){ //ctx 声明的

深藏阁楼爱情的钟/ 2021年09月14日 09:26/ 0 赞/ 640 阅读