欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > HTML >

HTML基础必学列表

前端HTLM的canvas描述作图

 

HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript)。

不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。

getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。

一般写法:<canvas id="tutorial"width="150"height="150"></canvas>

1getContext()

getContext()用来获得渲染上下文和它的绘画功能,只有一个参数,目前只支持2d,即:

var canvas = document.getElementById('tutorial');

var ctx = canvas.getContext('2d');

getContext()可以用来检测当前浏览器是不是支持canvas,如果不支持可以用指定文本替代:

var canvas = document.getElementById('tutorial');

if (canvas.getContext){

var ctx = canvas.getContext('2d');// 支持

} else {

// 不支持,可以写相关提示文字

}

案例:

<script type="text/javascript">

function draw(){

var canvas = document.getElementById('tutorial');

if (canvas.getContext){

var ctx = canvas.getContext('2d');

}

}

</script>

<style type="text/css">

canvas { border: 1px solid black; }

</style>

<body onload="draw();">

<canvas id="tutorial" width="150" height="150"></canvas>

</body>

2)绘制矩形

canvas提供了四种方法绘制矩形

rect(): 创建矩形,仅仅创建并未画出,仍需要fill或者stroke填充或者画出来!

fillRect(x, y, width, height) 绘制一个填充的矩形

strokeRect(x, y, width, height) 绘制一个矩形的边框

clearRect(x, y, width, height)清 除指定矩形区域,让清除部分完全透明。

例子:

function draw() {

var canvas = document.getElementById('canvas');

if (canvas.getContext) {

var ctx = canvas.getContext('2d');

ctx.fillRect(25,25,100,100);//绘制一个100*100矩形,默认黑色

ctx.clearRect(45,45,60,60);//删除一个60*60的矩形

ctx.strokeRect(50,50,50,50);//绘制一个50*50的边框

}}

HTML 5 Canvas基础学习教程(1

3)绘制路径

路径绘制图形需要的步骤:

1、首先,你需要创建路径起始点。

2、然后你使用画图命令去画出路径。

3、之后你把路径封闭。

4、一旦路径生成,你就能通过描边或填充路径区域来渲染图形。

通过以下常用函数来画图:

beginPath()新建一条路径,生成之后,图形绘制命令被指向到路径上生成路径。

closePath()闭合路径之后图形绘制命令又重新指向到上下文中。

stroke()通过线条来绘制图形轮廓。

fill()通过填充路径的内容区域生成实心的图形。

moveTo(x,y)将笔触移动到指定的坐标x以及y上。

lineTo(x, y)绘制一条从当前位置到指定x以及y位置的直线。

arc(x, y, radius, startAngle, endAngle, anticlockwise)画一个以(x,y)为圆心的以radius为半径的圆弧(圆),从startAngle开始到endAngle结束,按照anticlockwise给定的方向(默认为顺时针)来生成。

arcTo(x1, y1, x2, y2, radius)根据给定的控制点和半径画一段圆弧,再以直线连接两个控制点。

注意:注意:arc()函数中的角度单位是弧度,不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees

例子1:绘制一个三角形

function draw() {

var canvas = document.getElementById('canvas');

if (canvas.getContext){

var ctx = canvas.getContext('2d');

ctx.beginPath();//新建路径

ctx.moveTo(75,50);//75*20的位置开始

ctx.lineTo(100,75);//画到100*75

ctx.lineTo(100,25);//再画到100*25

ctx.fill();//填充颜色

}}

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h33314.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2017-07-08 02:23 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。