html 5 标签定义和用法
标签定义图形,比如图表和其他图像。
标签只是图形容器,您必须使用脚本来绘制图形。
实例
如何通过 canvas 元素来显示一个红色的矩形:
var canvas=document.getelementbyid('mycanvas');
var ctx=canvas.getcontext('2d');
ctx.fillstyle='#ff0000';
ctx.fillrect(0,0,80,100);
< canvas>定义图形 基于状态进行绘制的
大多数 canvas 绘图 api 都没有定义在 < canvas> 元素本身上,而是定义在通过画布的 getcontext() 方法获得的一个“绘图环境”对象上
canvas.width canvas.height //指定canvas的宽高
canvas.getcontext("2d"); //返回绘制的环境
context.moveto(10,10) //从(10,10)开始画
context.lineto(100,100) //从(10,10)开始画,画到(100,100)
context.stroke() //开始绘制(线条)
context.linewidth=3 //设置线条的宽度
context.strokestyle="#f00" 设置线条的颜色 stroke笔画的意思
context.fillstyle="rgb(255,0,0)";context.fill() //着色,,填充的颜色(颜色块)
context.beginpath(); //定义一个新的路径
context.closepath(); //用在路径结束,
如果绘制的路径不是封闭的则会自动封闭起来,不写closrpath则不会封闭
//从坐标(20,30)开始,画一个64*36的矩形
context.fillrect(20,30,64,36); //rect矩形
//绘制弧和圆
context.arc(
centetx,centery,radius, //圆心坐标及半径
startingangle,enddingangle, //从哪个弧度值开始,结束于哪个弧度值
anticlockwise=false //可选,,表示以顺时针开始绘制还是逆时针。
默认:顺时针。。true以逆时针绘制
)
//调用arc函数
//以(300,300)为圆心,200为半径画弧,从0画到1.5个pi
context.arc(300,300,200,0,1.5*math.pi)
//全局变量
window_width=1024; window_height=768;
//调用全局变量
canvas.width=window_width;
//render()函数 render(context);
renderdigit(0,0,parseint(hours/10),ctx)
总结
以上所述是小编给大家介绍的html5 canvas标签及基本使用,希望对大家有所帮助