canvas绚丽的随机曲线

 1 <!DOCTYPE >
 2 <html >
 3 <body>
 4 <canvas    width="800" height="450"></canvas>
 5 <script>
 6 var context = document.getElementsByTagName(‘canvas‘)[0].getContext(‘2d‘);
 7 var width = context.canvas.width;
 8 var height = context.canvas.height;
 9 var lastX = width * Math.random();
10 var lastY = height * Math.random();
11 var hue = 0;
12 function line (){
13
14     context.save();
15     context.translate(width/2, height/2);
16     context.scale(0.9, 0.9);
17     context.translate(-width/2,-height/2);
18
19     context.beginPath();
20     context.lineWidth = 5 + Math.random() *10;
21     context.moveTo(lastX, lastY);
22     lastX = width * Math.random();
23     lastY = height * Math.random();
24
25     context.bezierCurveTo(width*Math.random(),height*Math.random(),width*Math.random(),height*Math.random(),lastX,lastY);
26
27     hue = hue + 10 *Math.random();
28     context.strokeStyle = ‘hsl(‘+ hue +‘,50%,50%)‘;
29     context.shadowColor = ‘white‘;
30     context.shadowBlur = 10;
31
32     context.stroke();
33     context.restore();
34 }
35 setInterval(line,100);
36 function background(){
37     context.fillStyle = ‘rgba(0,0,0,0.1)‘;
38     context.fillRect(0,0, width, height)
39
40 }
41 setInterval(background, 100)
42 </script>
43 </body>
44 </html>

时间: 2024-10-31 14:43:54

canvas绚丽的随机曲线的相关文章

HTML5 Canvas中的贝塞尔曲线

在HTML5提供的画布功能,也就是Canvas中,getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.本文以getContext("2d")中提供的方法为例,简要研究了其中用于绘制曲线路径的贝塞尔曲线. JavaScript中的getContext("2d")为我们提供了两种绘制贝塞尔曲线路径的方法,分别是quadraticCurveTo()用于绘制二次贝塞尔曲线和bezierCurveTo()用于绘制三次贝塞尔曲线. 什么是贝塞

canvas教程(三) 绘制曲线

经过 canvas 教程(二) 绘制直线 我们知道了 canvas 的直线是怎么绘制的 而本次是给大家带来曲线相关的绘制 绘制圆形 在 canvas 中我们可以使用 arc 方法画一个圆 context.beginPath(); context.arc(x, y, r, startRadian, endRadian, antclockwise); context.closePath(); 我们是第一次用到 beginPath 和 closePath 这两个方法,首先这两个方法故名思意就是开始路径

HTML5 Canvas ( 圆和切点曲线的绘制 ) arc, arcTo

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/jQuery.js"></script> <style type="text/css">

HTML5 Canvas绚丽的小球详解

实例说明: 实例使用HTML5+CSS+JavaScript实现小球的运动效果 掌握Canvas的基本用法 技术要点: 从需求出发 分析Demo要实现的功能 擅于使用HTML5 Canvas 参考手册 主要分为两个部分: 静态布局:小球的设计,包括小球的位置.颜色.大小和大小变化情况等,初始化小球的函数,渲染函数,Update函数 动态主体:变量.数组的的定义,小球显示时长定时,鼠标移动触发小球运动的函数 代码部分: canvas标签,提供绘图的画布 js逻辑:静态小球 其中,_init()函数

THREE.js代码备份——canvas - lines - colors(希尔伯特曲线3D、用HSL设置线颜色)

<!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - lines - colors</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, m

js 利用canvas绘制直线、曲线

<body> <!--画板--> // 当浏览器不支持的时候才会出现文字 <canvas id="canvas" style="background-color: black;">您当前的版本不支持 </canvas> <script type="text/javascript"> // 拿到画板 var canvas = document.getElementById('canvas'

Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)

1.首先说一下canvas类: Class OverviewThe Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into the bitmap), a drawing primitive (e.g. Rect, Path,

html5 canvas绘图-贝塞尔曲线

贝塞尔曲线(ezier curve)最迟是由法国物理学家与数学家paul de Casteljau发明的.它的广泛运用则要归功于法国工程师皮埃尔 贝塞尔 贝塞尔曲线期初被用在汽车车身的设计上.现在则多用于计算机图形系统中.例如Adobe Illustrator/Apple的Cocoa框架以及在Html5的canvas. 贝塞尔曲线分为两种:平方(quadratic)贝塞尔曲线及立方(cubic)贝塞尔曲线.平方贝塞尔曲线是一种二次曲线(second degree curve),意思就是说,它们是

[转]html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法

继续讲canvas中画曲线的方法,今天讲quadraticCurveTo. 说实话这个方法有点吓人,单从函数名称上都可以初体验.话说,我觉得有必要把这个函数名缩短. quadratic的意思是二次,即数学中二次元方程那个二次.而ctx.quadraticCurveTo的参数如下: 代码如下: ctx.quadraticCurveTo(x1,y1,x,y); 其中x,y是终点的坐标,而x1,y1是曲线控制点的坐标?什么?你问我起点在哪里?起点在此之前用moveTo确定. 我之所以把控制点的坐标带上