来老师的专栏

学海无涯,一天天好起来...

HTML5绘图基础_10_绘制多个弧线_填充

类似于直线绘制中的,绘制多个图形一样,如果需要绘制多个弧线,应该使用beginPath()方法来开始一个新的路径,但如果每次都调用closePath()则会使弧线变成封闭的图形,代码如下: window.onload = function(){ var c...

2016-01-20 21:51:39

阅读数:742

评论数:0

HTML5绘图基础_09_绘制弧线详解

CanvasRenderingContext2D.arc() 是 Canvas 2D API 绘制圆弧路径的方法。 圆弧路径的圆心在 (x, y) 位置,半径为 r ,根据anticlockwise (默认为顺时针)指定的方向从 startAngle 开始绘制,到 endAngle 结束。 参数的...

2016-01-18 23:00:08

阅读数:1590

评论数:0

HTML5绘图基础_08_绘制多个图形(七巧板)

使用html5连续绘制多个图形,绘制七巧板

2016-01-18 21:17:04

阅读数:2268

评论数:0

HTML5绘图基础_07_绘制第二个图形

如何在画布上连续绘制两个图形呢? 我们需要在每次的图形前后添加beginPath和closePath方法即可。并且每次绘制需要调用stroke方法。 代码如下: context.beginPath(); context.moveTo(100,100); context.li...

2016-01-16 23:48:47

阅读数:348

评论数:0

HTML5绘图基础_06_既填充区域又绘制线条

context.moveTo(100,100); context.lineTo(100,400); context.lineTo(400,400); context.lineTo(100,100); context.fillStyle = "#0000ff...

2016-01-16 23:41:47

阅读数:648

评论数:0

HTML5绘图基础_05_填充区域

像绘制封闭的线条一样进行预设,然后使用fill()方法即可,如果使用stroke方法则为绘制线条,使用fill方法表示填充封闭线条的封闭区域。 代码如下: context.moveTo(100,100); context.lineTo(100,400); context...

2016-01-16 23:38:40

阅读数:541

评论数:0

HTML5绘图基础_04_绘制封闭线条

我们只需要使用lineTo将终点绘制到起点即可。 代码如下: context.moveTo(100,100);//起点 context.lineWidth = 5; context.strokeStyle = "#ff0000"; conte...

2016-01-16 23:34:17

阅读数:583

评论数:0

HTML5绘图基础_03_绘制连续线条

代码如下: context.moveTo(100,100); context.lineWidth = 5; context.strokeStyle = "#ff0000"; context.lineTo(100,400); context.lineTo(400,400); c...

2016-01-16 23:28:42

阅读数:612

评论数:0

HTML5绘图基础_02_绘制线条

在canvas画布中,首先我们需要了解的是画布的坐标系,画布的左上角为坐标系的原点(0,0),右为X轴,下为Y轴。 下述代码: context.moveTo(100,100); context.lineWidth = 5; context.strokeStyle = "#ff0000&q...

2016-01-16 23:21:24

阅读数:523

评论数:0

HTML5绘图基础_01_Canvas的使用

HTML5中的canvas为HTML5为更好的完成图形的绘制提供的画布。功能强大,具体使用方式为: (1)在页面中嵌入,为在不支持canvas的浏览器中给出准确的提示,可以在标签中嵌入适当的文本。如:         您的浏览器不支持画布的使用,这样在支持canvas的浏览器中,该文本不会显示出来...

2016-01-16 23:07:48

阅读数:1092

评论数:0

上河软——遇见更好的自己!

河北软件职业技术学院,软件技术专业

2016-01-13 22:29:18

阅读数:796

评论数:0

提示
确定要删除当前文章?
取消 删除
关闭
关闭