<!DOCTYPE html>
<html lang='zh-cn'>
<head>
<title>Insert you title</title>
<meta name='description' content='this is my page'>
<meta name='keywords' content='keyword1,keyword2,keyword3'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>
<style type='text/css'>
html,body,div,canvas {
margin: 0;
padding: 0;
}
body {
background: #FFF;
color: #FFF;
}
#can {
background: #F00;
margin: 50px auto;
display: block; /* 如果要想使 canvas 标签能够居中,那么必须 display 属性,这也说明canvas标签是内联元素 */
}
</style>
<script type="text/javascript">
$( function(){
var oCan = getId( 'can' );
var cxt = oCan.getContext( '2d' ); /* 目前只是支持 2d 环境,必须设置此环境,否则无效,切记 */
cxt.beginPath();
cxt.rect( 210 , 155 , 80 , 40 ); /* 绘制矩形路径 : x 坐标 y 坐标 width height 默认的起始坐标就是绘图环境的顶点*/
cxt.strokeStyle = '#000';
cxt.fillStyle = '#FFF';
/*
如果同时需要调用填充方法和触笔方法时,调用的次序不同,效果不同 原理就是线宽的原点是线的中心点,并且后绘制的会遮挡先绘制的内容,可以测试一下之间缺失的正好是
一半的宽度
*/
cxt.lineWidth = 10; /* 注意 : lineWidth 是没有单位的 */
cxt.fill(); /* 填充方法 */
cxt.stroke(); /* 触笔方法 */
cxt.closePath();
} );
function getId( id ){
return document.getElementById( id );
}
</script>
</head>
<body>
<!--
声明 :
这里和普通标签之间是不同之处在于,如果是普通标签 div span p em strong 标签里面写什么在浏览器中都会被显示出来,但是canvas的不同之处在于只有当浏览器不支
持标签的时候才会在浏览器中得以显示 ,默认是 300*150
canvas标签的另一个特殊之处在于它的宽高是只能设置在行间的而且只能使用特定的方式来进行设置,否则将出现特殊情况:
这就好像我们在饺子皮上作画,那么我们必须在作画之前就已经确定画布的大小,如果我们先画了画,在使用css中对于画布改变大小,那么饺子皮上的画必然被拉扯的变了形;难以辨识
-->
<canvas width='500' height='350' id='can'>请您更换浏览器,您的浏览器不支持 canvas 实现的效果</canvas>
</body>
</html>