如何使用canvas画星星

利用canvas画星星的代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>画星星</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById(‘canvas‘);
canvas.width=600;
canvas.height=600;
canvas.style.border="1px solid red";
if (canvas.getContext("2d")) {
var context=canvas.getContext("2d");

drawStar(context,200,100,300,300);

}else{
alert("你的浏览器版本过低,不支持canvas");
}

}

function drawStar(context,rx,ry,x,y){
context.beginPath();

context.strokeStyle="red";
context.lineWidth="5";
for (var i=0;i<5;i++) {
context.lineTo(Math.cos((18+i*72)/180*Math.PI)*rx+x,-Math.sin((18+i*72)/180*Math.PI)*rx+x);
context.lineTo(Math.cos((54+i*72)/180*Math.PI)*ry+y,-Math.sin((54+i*72)/180*Math.PI)*100+y);
};
context.closePath();
context.stroke();

}
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>

时间: 2024-10-05 04:15:05

如何使用canvas画星星的相关文章

canvas画随机闪烁的星星

canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. 1 function drawStars(x,y,radius1,radius2,num,drawType,color){ 2 var angle = 360/(num*2); 3 var arr = []; 4 for(var i=0;i<num*2;i++){ 5 var starObj = {}; 6 if(i%2==0){ 7 starObj.x = x+radiu

html5学习(一)--canvas画时钟

利用空余时间学习一下html5. 1 <!doctype html> 2 <html> 3 <head></head> 4 <body> 5 <canvas id="clock" width="500" height="500"></canvas> 6 <script> 7 var clock=document.getElementById('cloc

html5中用canvas画八大行星围绕太阳转

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8&

Android利用canvas画各种图形

canvas通俗的说就是一张画布,我们可以使用画笔paint,在其上面画任意的图形. 原理: 可以把canvas视为Surface的替身或者接口,图形便是绘制在Surface上的.Canvas封装了所有的绘制调用.通过Canvas, 绘制到Surface上的内容首先存储到一个内存区域(也就是对应的Bitmapz中),该Bitmap最终会呈现到窗口上. 使用: 1.Canvas可以直接new Canvas(): 2.在View中重写OnDraw()方法,里面有一个Canvas,今天讨论的内容. 方

HTML5之Canvas画正方形

1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>HTML5之Canvas画正方形</title> <script type="text/javascript"> function drawFour(id) { //获取canvas元素 var canvas = document.getElementById("

HTML5之Canvas画圆形

1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>HTML5之Canvas画圆形</title> </head> <body onLoad="drawFour('canvas')"> <canvas id="canvas" width="1200" height=&

樱花的季节,教大家用canvas画出飞舞的樱花树

又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果 第一步,我们先画出一棵树的主体. 我画树的使用的原理是,定义一个起始点,从这个点开始,向一个角度移动一段距离.得到另一个点. 画出一条线连接两个点. 以新得到的点,依旧向这个角度,移动一段距离.得到第三个点,连写第二第三个点. 以此类推.一定步长之后,就得到一条射线. 我们根据自然界中的真实树的情况,这条线越来越细,直到

canvas画的北斗七星和大熊座

用canvas画的北斗七星和大熊座,主要用到的知识点是:canvas.定时器. html代码: 1 <body> 2 <canvas id="canvas" width="1250px" height="670px"> 3 4 </canvas> 5 6 </body> css代码: 1 body{ 2 background-color:#0B0B0D; 3 } 4 5 #canvas{ 6 pos

canvas画简单圆形动画

HTML: 1 <html> 2 <head> 3 <title>canvas画圆</title> 4 <meta http-equiv="content-type" content="text/html" charset="utf-8"> 5 <link rel="stylesheet" href="circle.css"/> 6 &