<html>
<head>
<style>
body {
background: #eeeeee
}
#canvas {
background: #ffffff
cursor: pointer
margin-left: 10px
margin-top: 10px
-webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5)
-moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5)
box-shadow: 4px 4px 8px rgba(0,0,0,0.5)
}
</style>
</head>
<body>
<canvas id='canvas' width='600' height='400'>
Canvas not supported
</canvas>
<script>
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
AXIS_MARGIN = 40,
AXIS_ORIGIN = { x: AXIS_MARGIN, y: canvas.height-AXIS_MARGIN },
AXIS_TOP = AXIS_MARGIN,
AXIS_RIGHT = canvas.width-AXIS_MARGIN,
HORIZONTAL_TICK_SPACING = 10,
VERTICAL_TICK_SPACING = 10,
AXIS_WIDTH = AXIS_RIGHT - AXIS_ORIGIN.x,
AXIS_HEIGHT = AXIS_ORIGIN.y - AXIS_TOP,
NUM_VERTICAL_TICKS = AXIS_HEIGHT / VERTICAL_TICK_SPACING,
NUM_HORIZONTAL_TICKS = AXIS_WIDTH / HORIZONTAL_TICK_SPACING,
TICK_WIDTH = 10,
TICKS_LINEWIDTH = 0.5,
TICKS_COLOR = 'navy',
AXIS_LINEWIDTH = 1.0,
AXIS_COLOR = 'blue'
// Functions..........................................................
function drawGrid(color, stepx, stepy) {
context.save()
context.fillStyle = 'white'
context.fillRect(0, 0, context.canvas.width, context.canvas.height)
context.lineWidth = 0.5
context.strokeStyle = color
for (var i = stepx + 0.5 i < context.canvas.width i += stepx) {
context.beginPath()
context.moveTo(i, 0)
context.lineTo(i, context.canvas.height)
context.stroke()
}
for (var i = stepy + 0.5 i < context.canvas.height i += stepy) {
context.beginPath()
context.moveTo(0, i)
context.lineTo(context.canvas.width, i)
context.stroke()
}
context.restore()
}
function drawAxes() {
context.save()
context.strokeStyle = AXIS_COLOR
context.lineWidth = AXIS_LINEWIDTH
drawHorizontalAxis()
drawVerticalAxis()
context.lineWidth = 0.5
context.lineWidth = TICKS_LINEWIDTH
context.strokeStyle = TICKS_COLOR
drawVerticalAxisTicks()
drawHorizontalAxisTicks()
context.restore()
}
function drawHorizontalAxis() {
context.beginPath()
context.moveTo(AXIS_ORIGIN.x, AXIS_ORIGIN.y)
context.lineTo(AXIS_RIGHT, AXIS_ORIGIN.y)
context.stroke()
}
function drawVerticalAxis() {
context.beginPath()
context.moveTo(AXIS_ORIGIN.x, AXIS_ORIGIN.y)
context.lineTo(AXIS_ORIGIN.x, AXIS_TOP)
context.stroke()
}
function drawVerticalAxisTicks() {
var deltaY
for (var i=1 i < NUM_VERTICAL_TICKS ++i) {
context.beginPath()
if (i % 5 === 0) deltaX = TICK_WIDTH
else deltaX = TICK_WIDTH/2
context.moveTo(AXIS_ORIGIN.x - deltaX,
AXIS_ORIGIN.y - i * VERTICAL_TICK_SPACING)
context.lineTo(AXIS_ORIGIN.x + deltaX,
AXIS_ORIGIN.y - i * VERTICAL_TICK_SPACING)
context.stroke()
}
}
function drawHorizontalAxisTicks() {
var deltaY
for (var i=1 i < NUM_HORIZONTAL_TICKS ++i) {
context.beginPath()
if (i % 5 === 0) deltaY = TICK_WIDTH
else deltaY = TICK_WIDTH/2
context.moveTo(AXIS_ORIGIN.x + i * HORIZONTAL_TICK_SPACING,
AXIS_ORIGIN.y - deltaY)
context.lineTo(AXIS_ORIGIN.x + i * HORIZONTAL_TICK_SPACING,
AXIS_ORIGIN.y + deltaY)
context.stroke()
}
}
// Initialization................................................
drawGrid('lightgray', 10, 10)
drawAxes()
</script>
</body>
</html>
Cavas的英文解释是画布,使用这个Html5的Canvas标签可以创建画布,结合JavaScript可以画出很多图形,我们先以画一个蓝色矩形为例,说明一下这个标签的使用方法,首先需要建立一个HTML5的网页,方法是:
进入DW后,选择:文件-->新建
在d出的对话框中选择文件类型为Html5
选择“创建”后,即会形成一个空白网页,选择“文件”--"保存“
起名为:juxing
这个名字可以依据自己的喜好起,但最好名字与网页内容相关,以后好找,另外一个需要注意的是,最好不用汉字。
我们将视图切换为”代码“视图
并将标题改为”画出矩形“
标题也可以依据自己的喜好进行设定,并不影响网页的运行。
Html是标记型语言,各种功能都需要在对应的标签里面才可以,所以我们首先需要添加标签。
我们只需输入<c,就会看到提示列表里出现我们所需要的标签canvas,按下回车键,即可完成输入。
之后,我们每一次按下空格、或输入相关字母,都会有提示列表,我们只需选择所需的项目,按下回车即可,并不需要完整输入字串,可以避免输入时的拼写错误。在本例中,只有引号内的”mycanvas“是需要完整输入的,其他部分的关键字都可以通过提示列表进行输入。
命令为:<canvas id="mycanvas" width="600" height="400"></canvas>
只有Canvas标记是不能直接画出图来的,需要配合JavaScript语言,首先需要写出对应的程序标记。
Html语言中的标记都是成对出现的,我们为了避免错误,可以先将标记的起始、标记的结束写好
写好前后标记后,我们就可以在标记中使用JavaScript语言,调用Canvas标记,画出我们所需要图形了,方法是:
var canvas=document.getElementById('mycavas')
将变量canvas,赋值为我们之前在html中定义的画布”mycanvas,以方便JavaScript调用
var ctxt=canvas.getContext('2d')
将变量 ctxt赋值为利用刚定义的“canvas”返回的二维绘图环境对象,使用这个对象就可以绘图了
使用fillStyle方法设置颜色,是十六进制表示的三原色分量范围是从“#000000”至“FFFFFF”
ctx.fillStyle='#0066cc'
我们将颜色设置为一种蓝色,这个颜色也可以随自己喜好 更改。
ctx.fillRect(50,50,400,200)
填充的起始位置设置为(50,50),矩形宽度为400,高度为200
选择在浏览器中浏览后,即可看到我们所需要的矩形
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)