- 博客(11)
- 资源 (15)
- 收藏
- 关注
RSS订阅原创 HTML5绘图基础_10_绘制多个弧线_填充
类似于直线绘制中的，绘制多个图形一样，如果需要绘制多个弧线，应该使用beginPath()方法来开始一个新的路径，但如果每次都调用closePath()则会使弧线变成封闭的图形，代码如下： window.onload = function(){ var canvas = document.querySelector("#c1"); canvas
2016-01-20 21:51:39
1012
原创 HTML5绘图基础_09_绘制弧线详解
CanvasRenderingContext2D.arc() 是 Canvas 2D API 绘制圆弧路径的方法。 圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。 参数的定义具体如下：
2016-01-18 23:00:08
2522
原创 HTML5绘图基础_07_绘制第二个图形
如何在画布上连续绘制两个图形呢？ 我们需要在每次的图形前后添加beginPath和closePath方法即可。并且每次绘制需要调用stroke方法。 代码如下： context.beginPath(); context.moveTo(100,100); context.lineTo(100,400); context.lineTo(400,400);
2016-01-16 23:48:47
586
原创 HTML5绘图基础_06_既填充区域又绘制线条
context.moveTo(100,100); context.lineTo(100,400); context.lineTo(400,400); context.lineTo(100,100); context.fillStyle = "#0000ff"; context.fill(); context.strokeStyle = "red";
2016-01-16 23:41:47
856
原创 HTML5绘图基础_05_填充区域
像绘制封闭的线条一样进行预设，然后使用fill()方法即可，如果使用stroke方法则为绘制线条，使用fill方法表示填充封闭线条的封闭区域。 代码如下： context.moveTo(100,100); context.lineTo(100,400); context.lineTo(400,400); context.lineTo(100,100);
2016-01-16 23:38:40
735
原创 HTML5绘图基础_04_绘制封闭线条
我们只需要使用lineTo将终点绘制到起点即可。 代码如下： context.moveTo(100,100);//起点 context.lineWidth = 5; context.strokeStyle = "#ff0000"; context.lineTo(100,400); context.lineTo(400,400); context.
2016-01-16 23:34:17
784
原创 HTML5绘图基础_03_绘制连续线条
代码如下： context.moveTo(100,100); context.lineWidth = 5; context.strokeStyle = "#ff0000"; context.lineTo(100,400); context.lineTo(400,400); context.stroke();
2016-01-16 23:28:42
781
原创 HTML5绘图基础_02_绘制线条
在canvas画布中，首先我们需要了解的是画布的坐标系，画布的左上角为坐标系的原点（0,0），右为X轴，下为Y轴。 下述代码： context.moveTo(100,100); context.lineWidth = 5; context.strokeStyle = "#ff0000";context.lineTo(100,400); context.stroke();moveTo将画笔移动到
2016-01-16 23:21:24
706
原创 HTML5绘图基础_01_Canvas的使用
HTML5中的canvas为HTML5为更好的完成图形的绘制提供的画布。功能强大，具体使用方式为： （1）在页面中嵌入，为在不支持canvas的浏览器中给出准确的提示，可以在标签中嵌入适当的文本。如： 您的浏览器不支持画布的使用，这样在支持canvas的浏览器中，该文本不会显示出来。亦可以在代码中进行控制，如后面的代码所示。 （2）画布的大小一般不使用CSS样式表来控制，而使
2016-01-16 23:07:48
1248
angularJS1.4.0版
2015-06-05
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人