canvas 画矩形,html canvas画圆
画布一般指画布。最近对html5写游戏比较感兴趣，就干脆用Canvas了。
我以前在silverlight和wpf上用过画布。在silverlight上，Canvas是一个绝对定位的容器，可以在其中放置任何控件。通过他，我们可以构建画布、图形应用、GIS应用等。
在html5中，canvas是一个新标签:复制代码如下：
帆布/帆布
他拥有基本html标签的所有属性，还可以设置自己的风格。
复制代码如下：
画布style= width:400 px；高度：300像素；/画布
风格
画布{宽度：400px高度：400px背景：# 000；}
/风格
帆布/帆布
他还有一个特定的属性：复制代码代码如下：
画布高度=300 宽度= 400 /画布
这里的高度和宽度不同于以往html标签的属性，也不同于style的高度和宽度，主要是指画布中的坐标范围。样式中的宽度和高度是指画布的实际显示尺寸。
例如，定义以下画布：按如下方式复制代码：
画布宽度=400 高度=300 样式=宽度：600px高度：450px边框：1px solid # 000/画布
然后在画布上画一个坐标为100，50，大小为200，150的矩形。你会看到如下图的实际效果：图片中画布的大小是由style决定的600px * 450px，但是填充整个画布的坐标只有400*300，对应的是括号中的大小。
在画布中绘图是基于坐标的，所以100，50坐标转换成150px，75px屏幕坐标，矩形的大小也从200*150转换成300px*225px屏幕尺寸。
您可以按照下面的代码自己尝试一下：
复制代码如下：
！声明文档类型
html/ppbody
画布宽度=400 高度=300 样式=宽度：600px高度：450px边框：1px solid # 000/画布
脚本
var context=document . getelementsbytagname( canvas )[0]。get context( 2d )；
context.fillRect(100，50，200，150)；
/脚本
/body
/html
Canvas还有一些其他属性，但是我还没有读过。他还有一个主要的方法，就是getContext()，就是获取绘图的对象。
通过canvas的dom对象，可以调用getContext(2d )的方法得到对应的绘图对象：
var canvas=document . getelementsbytagname( canvas )[0]；
var context=canvas . get context( 2d )；
您可以在开发人员控制台中看到此drawing2d的属性和方法：
包括画笔样式类的属性，如fillStyle、stokeStyle、lineCap、font绘制动作的方法，如fillRect、strokeRect、beginPath、moveTo、lineTo、closePath、stroke、fill、drawImage以及一些其他方法，如transfrom和save。
我简单说一下我看过的几个属性和方法。其他的需要我自己去探索：
FillStyle:填充样式，可以是红色：#ff0000等颜色值的html代码。不知道其他属性是否支持css3。
StrokeStyle:线型
字体：字体样式
Rect: function (x，y，width，height)，直接按fillStyle填充一个矩形。
Stroke: function (x，y，width，height)，直接按strokeStyle描出一条矩形边。
BeginPath:开始画线，借助moveTo\lineTo\closePath等绘制折线或多边形
To:函数(x，y)将画线的起点移动到一个新的坐标。
LineTo:function(x，y)从当前点绘制目标点。
ClosePath:从当前点连接到起点。
笔画：按照上面的路径用strokeStyle画一条虚线。
填充：根据上面的路径和fillStyle画一个矩形。
DrawImage:函数(Image，x，y，width，height)将一个图像对象添加到画布上。请注意，这里的图像对象必须已经加载。如var img=new Image()；img . src= test . png ；Img.onload=function(){/*您可以在这里将图像添加到画布*/}
可以看看上面画矩形的方法：复制代码如下：
context.fillRect(100，50，200，150)；
画一条虚线：复制代码如下：
context . begin path()；
context.moveTo(10，10)；
context.lineTo(10，110)；
context.lineTo(110，110)；
context.lineTo(110，10)；
context . close path()；
context . stroke()；
Canvas有画图的功能，但是在用户交互上显得比较弱。比较silverlight的画布，位图。带画布的html的. NET和div:
感觉个人画布更像位图，是把位图放在浏览器端的版本。当然，我们可以通过它实现更多的功能。Canvas本身能做到的相对较少，但它肯定能以其他浏览器端应用的现有技术创造出更多更好的应用。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。