html5的canvas,html5的canvas的作用
怎样在html5中添加canvas标签
canvas 标签是 HTML 5 中的新标签。
成都服务器托管,成都创新互联提供包括服务器租用、BGP机房服务器托管、带宽租用、云主机、机柜租用、主机租用托管、CDN网站加速、申请域名等业务的一体化完整服务。电话咨询:18982081108
定义和用法
canvas 标签定义图形,比如图表和其他图像。
canvas 标签只是图形容器,您必须使用脚本来绘制图形。
实例
通过 canvas 元素来显示一个红色的矩形:
!DOCTYPE HTML
html
head
script type="text/javascript"
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('24d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
/script
/head
body
canvas id="myCanvas"your browser does not support the canvas tag /canvas
/body
/html
html5 canvas是做什么的
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
html5 canvas绘图有什么用
W3school上面是这么介绍的:
HTML5 canvas 标签用于绘制图像(通过脚本,通常是 JavaScript)。不过,canvas 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。
更多信息
HTML5 - Canvas
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
在使用 canvas 绘制图像时,canvas 画布左上角的坐标为(0, 0)
注意:canvas 画布大小不可通过 css 来改变,只能通过属性方式设置,否则可能出现失帧的情况(当使用 css 方式改变 canvas 画布大小时,只是 cavas 标签的大小改变了,正真的绘图区域大小并没有改变,所以出现了失帧的情况)。
示例:
示例:
示例:
示例:
示例:
示例:
示例:
1)参数说明:
参数 x:矩形左上角的 x 坐标。
参数 y:矩形左上角的 y 坐标。
参数 width:矩形的宽度,以像素计。
参数 height:矩形的高度,以像素计。
2) 注意事项:
context.rect(x, y, width, height); 只是创建了矩形,并没有绘制出来。因此,创建完成后需使用 context.stroke(); 来绘制。
3)示例:
1)参数说明:
参数 x:矩形左上角的 x 坐标。
参数 y:矩形左上角的 y 坐标。
参数 width:矩形的宽度,以像素计。
参数 height:矩形的高度,以像素计。
2)默认的填充颜色是黑色。可以使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。
3)示例:
1)参数说明:
参数 x:矩形左上角的 x 坐标。
参数 y:矩形左上角的 y 坐标。
参数 width:矩形的宽度,以像素计。
参数 height:矩形的高度,以像素计。
2)笔触的默认颜色是黑色。
3)可以使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。
4)示例:
1)参数说明:
参数 x:要清除的矩形左上角的 x 坐标。
参数 y:要清除的矩形左上角的 y 坐标。
参数 width:要清除的矩形的宽度,以像素计。
参数 height:要清除的矩形的高度,以像素计。
小技巧:
当 x = 0,y = 0,width = canvas.width,height = canvas.height 时,则可以清除画布上的矩形
2)示例:
1)参数说明:
参数 x:圆中心的 x 坐标。
参数 y:圆中心的 y 坐标。
参数 r:圆的半径。
参数 sAngle:起始角弧度(圆的三点钟位置是0度)。
参数 eAngle:结束角弧度(圆的三点钟位置是0度)。
参数 counterclockwise:规定逆时针还是顺时针绘图。f'alse = 顺时针,true = 逆时针。
2) 角度和弧度的关系:角度/弧度 = 180/pi
3)创建完圆弧后需使用 context.stroke(); 绘制创建的圆弧。
4)示例:绘制一个圆
5)示例:绘制圆上任意一点
圆上任意一点坐标:x = ox + r*cos(弧度),y = oy + r*cos(弧度)
ox:圆心的 x 坐标。
oy:圆心的 y 坐标。
r:圆的半径。
2)设置字体水平对齐方式
2)设置字体垂直对齐方式
textBaseline 属性在不同的浏览器上效果不同,特别是使用 "hanging" 或 "ideographic" 时。
3)设置文字阴影效果
1)参数说明:
参数 text:文本内容
参数 x:开始绘制文本的 x 坐标位置(相对于画布)。
参数 y:开始绘制文本的 y 坐标位置(相对于画布)。
2)默认的填充颜色是黑色。可以使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。
3)示例:
1)参数说明:
参数 text:文本内容
参数 x:开始绘制文本的 x 坐标位置(相对于画布)。
参数 y:开始绘制文本的 y 坐标位置(相对于画布)。
2)默认的笔触颜色是黑色。可以使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。
3)示例:
1)参数说明:
参数 img:规定要使用的图像。
参数 x:在画布上放置图像的 x 坐标位置。
参数 y:在画布上放置图像的 y 坐标位置。
2)当图像的大小超出画布的大小时,超出的部分将不会被显示出来。
3)示例:
1)参数说明:
参数 img:规定要使用的图像。
参数 x:在画布上放置图像的 x 坐标位置。
参数 y:在画布上放置图像的 y 坐标位置。
参数 width:要使用的图像的宽度(伸展或缩小图像)。
参数 height:要使用的图像的高度(伸展或缩小图像)。
2)因保持 width/height = img.width/img.height,否则绘制后的图片会失帧。
3)示例:
1)参数说明:
参数 img:规定要使用的图像。
参数 sx:从图像的 sx 坐标位置开始剪切。
参数 sy:从图像的 sy 坐标位置开始剪切。
参数 swidth:剪切的宽度。
参数 sheight:剪切的高度。
参数 x:在画布上放置图像的 x 坐标位置。
参数 y:在画布上放置图像的 y 坐标位置。
参数 width:要使用的图像的宽度(伸展或缩小图像)。
参数 height:要使用的图像的高度(伸展或缩小图像)。
2)因保持 width/height = swidth/sheight,否则绘制后的图片会失帧。
3)示例:
stop:介于 0.0 与 1.0 之间的值,表示渐变中开始(0.0)与结束(1.0)之间的位置。
color:颜色。
示例:
分享名称:html5的canvas,html5的canvas的作用
标题链接:http://myzitong.com/article/hoiegp.html