玩转html5canvas画图(4)

时间：2018-11-26

View Code

1 function draw24(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 8 context.moveTo(50, 50); 9 context.bezierCurveTo(50, 50,150, 50, 150, 150); 10 context.stroke(); 11 context.quadraticCurveTo(150, 250, 250, 250); 12 context.stroke(); 13 } 织梦内容管理系统

dedecms.com

copyright dedecms

织梦好，好织梦

下面给出书本的例子，一朵扭曲的绿色菊花...编书这哥们对菊花情有独钟啊- - 本文来自织梦

dedecms.com

View Code

1 function draw2(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 context.fillStyle = "#EEEFF"; 8 context.fillRect(0, 0, 400, 300); 9 var n = 0; 10 var dx = 150; 11 var dy = 150; 12 var s = 100; 13 context.beginPath(); 14 context.globalCompositeOperation = 'and'; 15 context.fillStyle = 'rgb(100,255,100)'; 16 var x = Math.sin(0); 17 var y = Math.cos(0); 18 var dig = Math.PI / 15 * 11; 19 context.moveTo(dx, dy); 20 for (var i = 0; i < 30; i++) { 21 var x = Math.sin(i * dig); 22 var y = Math.cos(i * dig); 23 context.bezierCurveTo(dx + x * s, dy + y * s - 100, dx + x * s + 100, dy + y * s, dx + x * s, dy + y * s); 24 } 25 context.closePath(); 26 context.fill(); 27 context.stroke(); 28 } 本文来自织梦

dedecms.com

内容来自dedecms

关于贝塞尔曲线可以参考百度百科和这篇文章

 线性渐变 var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd)

 线性渐变颜色lg.addColorStop(offset,color)
内容来自dedecms

    xstart:渐变开始点x坐标

    ystart:渐变开始点y坐标

本文来自织梦

    xEnd:渐变结束点x坐标

dedecms.com

    yEnd:渐变结束点y坐标

 

织梦好，好织梦

    offset:设定的颜色离渐变结束点的偏移量(0~1)

    color:绘制时要使用的颜色 内容来自dedecms

给出书本偏移量的解析图，从图可以看出线性渐变可以是两种以上颜色的渐变

织梦内容管理系统

本文来自织梦

View Code

共14页:

上一页

1

2

3

4

5

6

7

8

9

10

11

12

13

14

下一页

上一篇：傲剑狂刀出招表（键盘出招表+秘籍） 下一篇：写作文必学的六大修辞手法详解