<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas案例</title>
</head>
<script type="text/javascript" src="script.js"></script>
<body onload="draw('canvas')">
<h1>Canvas案例</h1>
<canvas id='canvas' width="400" height="300" />
</body>
</html>
在这个页面中我们写了一个canvas元素。该元素的ID为canvas。然后链接了script.js这个文件。
//script.js
function draw(id)
{
var canvas = document.getElementById(id)
if(canvas==null){
return false
}
var context = canvas.getContext('2d')
context.fillStyle="#eeeeff"
context.fillRect(0,0,400,300)
context.fillStyle='rgba(255,0,0,0.25)'
context.translate(200,50)
createFiveStar(context)
context.fill()
}
function createFiveStar(context){
var dx = 0
var dy = 100
var s = 50
context.beginPath()
var x = Math.sin(0)
var y = Math.cos(0)
var dig = Math.PI/5*4
for(var i=0i<5i++){
var x = Math.sin(i*dig)
var y = Math.cos(i*dig)
context.lineTo(dx+x*s,dy+y*s)
}
context.closePath()
}
我们提供了两个方法一个是draw方法。当页面加载完成的时候就会执行draw方法中的内容。
而draw方法中呢又会执行createFiveStart函数。
下面我来分析下createFiveStart函数的内容：
function createFiveStar(context){
var dx = 0//画出来的五角星x偏移位置
var dy = 100//画出来的五角星y偏移位置
var s = 50//画出来的五角星的大小
context.beginPath()//开始路径绘制
var x = Math.sin(0)//默认的x坐标
var y = Math.cos(0)//默认的y坐标
var dig = Math.PI/5*4//弧度值
for(var i=0i<5i++){
var x = Math.sin(i*dig)
var y = Math.cos(i*dig)
context.lineTo(dx+x*s,dy+y*s)//划线
}
context.closePath()//结束路径
}
好了到了这里我们就完成了HTML5中，五角星的绘制。
CSS样式:
.star-five {margin: 50px 0
position: relative
display: block
color: red
width: 0px
height: 0px
border-right: 100px solid transparent
border-bottom: 70px solid red
border-left: 100px solid transparent
-moz-transform: rotate(35deg)
-webkit-transform: rotate(35deg)
-ms-transform: rotate(35deg)
-o-transform: rotate(35deg)
}
如果你是在html里打的代码，保存文件并双击html文件即可在浏览器中看到效果了。若是用的其他编程软件，可以找到main函数鼠标右键点run运行。
扩展资料
代码（code）是程序员用开发工具所支持的语言写出来的源文件，是一组由字符、符号或信号码元以离散形式表示信息的明确的规则体系。
代码设计的原则包括唯一确定性、标准化和通用性、可扩充性与稳定性、便于识别与记忆、力求短小与格式统一以及容易修改等。 源代码是代码的分支，某种意义上来说，源代码相当于代码。现代程序语言中，源代码可以书籍或磁带形式出现，但最为常用格式是文本文件，这种典型格式的目的是为了编译出计算机程序。计算机源代码最终目的是将人类可读文本翻译成为计算机可执行的二进制指令，这种过程叫编译，它由通过编译器完成。
供把资料和指示输入自动计算机或制表机的任何符号系统；亦指这种符号的记录（如靠打孔资料卡片或磁带上的受磁点
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）