使用canvas能画各种各样的东西
用过canvas的人都知道,在这个画布上面可以制作各种各样的动画效果,想必大家都用过这个。
晒晒刚刚用这个做的一个demo:
现在来画一个圆看看:
demo.js:
var can,ctx,count = 1,w,h,i; can = document.getElementById('can');
ctx = can.getContext('2d'); w = document.body.scrollWidth;
h = document.body.scrollHeight;
can.setAttribute('width',w)
can.setAttribute('height',h)
// angle for
angle = Math.PI/2 * count;
x = w/2 + Math.sin(angle);
y = h/2 + Math.sin(angle);
ctx.beginPath(); ctx.arc(x,y ,h/6,0,2*Math.PI);
ctx.fillStyle = '#3ff';
ctx.strokeStyle = '#333';
ctx.stroke();
ctx.fill();
对应的.html:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body bgColor='#000'>
<canvas id="can"></canvas>
<script src="js/demo.js"></script>
</body>
</html>
这个太单调了,我们可以把angle这段代码循环一下,看看demo是什么效果?
demo.js:
for( i = 0; i <count;i++){
angle = Math.random(Math.PI/2 * i);
x = (w/3)*Math.sin(angle);
y = h/3 + (1 + angle)*Math.sin(angle);
ctx.beginPath();
ctx.arc(2*x,y,h/8,0,2*Math.PI);
ctx.fillStyle = '#3ff';
ctx.strokeStyle = '#000';
ctx.stroke();
ctx.fill();
}
不想那么单调放水平,也可以这样有弧度:
有了它以后想做什么(神马)都可以! -/-
使用canvas能画各种各样的东西的更多相关文章
- (转)第02节:在Canvas上画简单的图形
我们现在已经可以在HTML中使用Fabric.js库了,那这节我们就详细的学习一下如何在canvas上画出简单的图形. 在画东西之前我们需要了解画任何东西的基本三个步骤: 声明画布(canvas),用 ...
- 使用JavaScript在Canvas上画出一片星空
随着Html5的迅猛发展,画布也变得越来越重要.下面我就写一个关于在canvas上画出一片星空的简单的代码的示例. 理论基础 初始化一个canvas,获得一个用于绘制图形的上下文环境context.并 ...
- 根据多个点使用canvas贝赛尔曲线画一条平滑的曲线
众所周知想用canvas画一条曲线我们可以使用这些函数: 二次曲线:quadraticCurveTo(cp1x, cp1y, x, y) 贝塞尔曲线:bezierCurveTo(cp1x, cp1y, ...
- Canvas 如何画一个四分之一圆
转: Canvas 如何画一个四分之一圆 HTML: Document JS: var c = document.getElementById('ctx') var ctx = c.getContex ...
- 使用canvas 代码画小猪佩奇
最近不是小猪佩奇很火嘛!!! 前几天 在知乎 看见了别人大佬用python写的 小猪佩奇, 顿时想学 ,可是 自己 没学过python(自己就好爬爬图片,,,,几个月没用 又丢了) 然后 就想画一个 ...
- canvas案例——画时钟
基本思路,先画一个200半径的圆 ctx.arc(250,250,200,0,2*Math.PI); 然后再画时分刻度,可以先利用translate变化坐标到圆的中心点,然后再通过rotate旋转 / ...
- 用CSS3和Canvas来画网格
我们经常使用一些excel表格来处理数据,在html中,我们可以用table来制成表格.今天来看一下一些不同的方法. 方法一:使用CSS3的background的linear-gradient属性 l ...
- canvas,画个纸飞机
在浏览器中的效果图: 代码如下: 主要练习下用javascript在canvas画画,至于能不能画的好看,可能看美术细菌,嘿嘿.10分钟搞定
- canvas学习-----画直线
画布 1.添加canvas标签 可以通过CSS或者JS来设置canvs标签的width,height;Ps: <canvas id="cvs"></canvas ...
随机推荐
- 1.22-1.24 Oozie企业使用案例
一.将hive的表数据用sqoop抽取到mysql 1.编写oozie workflow和Coordinator ## [root@hadoop-senior oozie-apps]# pwd /op ...
- 3 pyspark学习---sparkContext概述
1 Tutorial Spark本身是由scala语言编写,为了支持py对spark的支持呢就出现了pyspark.它依然可以通过导入Py4j进行RDDS等操作. 2 sparkContext (1) ...
- C#基础:线程之异步回调(委托)
异步回调,什么是异步回调?我是这样理解的,当主线程在执行一段代码的时候,我们用委托执行了一个线程,这个线程要返回一个结果,关键是什么时候返回这个结果,异步回调就是在这个线程执行完成后立即返回这个线程的 ...
- Axure RP 7.0 标准教程(2)--基本介绍
母版:用来放置一些相同元素的部件 两个页面都放入母版 一处更改 所有更改 添加图片:双击可以本地添加 ---------- 创建share.axure账号 https://share.axur ...
- 带着问题看 react-redux 源码实现
前言 Redux作为通用的状态管理器,可以搭配任意界面框架.所以并搭配react使用的话就要借助redux官方提供的React绑定库react-redux,以高效灵活的在react中使用redux.下 ...
- 洛谷 - P4997 - 不围棋 - 并查集 - 模拟
https://www.luogu.org/problemnew/show/P4997 首先是改变气的定义,使得容易计算,这个很好理解. 然后使用并查集,因为要维护整个连通块的性质. 最后的难点在于, ...
- 洛谷 P4704 太极剑【贪心】
首先考虑分割线能分割一条线当且仅当分割线一个端点在这条线的ab中间,另一端点在外面,也就是分割线对应的一条弧不能同时有这条线的两个端点 每条线的两端点都染同色,然后分段,一段里面颜色互不相同,分割线就 ...
- 11-1模拟赛 By cellur925
期望得分:70+100+60 实际得分:70+20+60 \(qwq\). T1:有一个 \(n\) × \(n\) 的 \(01\) 方格, 图图要从中选出一个面积最大的矩形区域, 要求这个矩形区域 ...
- iOS 7:漫谈#define 宏定义
#define宏定义在C系开发中可以说占有举足轻重的作用.底层框架自不必说,为了编译优化和方便,以及跨平台能力,宏被大量使用,可以说底层开发离开define将寸步难行.而在更高层级进行开 ...
- D. Pair Of Lines( Educational Codeforces Round 41 (Rated for Div. 2))
#include <vector> #include <iostream> #include <algorithm> using namespace std; ty ...