画布
1.画布标签定义
定义元素一般需要宽度“width”属性和“height"属性，当然者两个属性可选，还可以用DOM属性或者CSS来设置。默认是"width"=300px ”height“=150px；
很多老的浏览器并不支持Canvas特性,这是需要对支持Canvas特性的浏览器给出提示:
浏览器不支持Canvas元素
2.画布工具对象、坐标、路径和填充
画布区域其实是一个二维网格，其左上角的坐标为（0，0），因此也是画布的基点坐标。
画布工具常用的路径方法如下：
moveTO(x, y)方法 定义线条开始的坐标
lineTO(x, y)方法 定义线条结束的坐标
arc(x, y, r, start, stop)方法 定义画圆
画布工具常用的填充方法如下：
fillRect(x, y, width, height)方法 进行填充矩形画图操作
fil()方法 进行填充画图操作
当标签元素被添加到HTML5页面上的时候，初始化渲染是空白的。在通过JavaScript脚本语言进行图形绘制操作之前，先要获得渲染的上下文对象。具体是通过Canvas对象的getContext()方法获取的。
<script type="text/javascript">
window.onload = function() { //资源加载结束后触发
var canvas =document.querySelector("canvas"); //获取canvas元素
if(canvas.getContext){ //判断上下文对象是否有效
var ctx = canvas.getContext("2d"); //获取渲染上下文
ctx.fillStyle = "#6A6AA7"; //填充颜色
ctx.fillRect(50,50, 200,200); //绘制图形
}
}
</script>
</head>
<body>
<canvas width="300" height="300">浏览器不支持canvas工具</canvas>
</body>
3207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
