绘制气泡
二次贝塞尔曲线 canvas quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点,向当前路径添加一个点。 quadraticCurveTo(cpx,cpy,x,y) 贝塞尔控制点的 x 坐标,贝塞尔控制点的 y 坐标,结束点的 x 坐标,结束点的 y 坐标。 提示:二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点,第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在,那么请使用 beginPath() 和 moveTo() 方法来定义开始点。 (图片参考:HTML5 canvas quadraticCurveTo() 方法 )
var canvas= document. querySelector ( "canvas" ) ;
canvas. width= 800 ;
canvas. height= 600 ;
var ctx= canvas. getContext ( "2d" ) ;
draw ( ) ;
function draw ( ) {
ctx. clearRect ( 0 , 0 , 800 , 600 ) ;
ctx. lineCap= "round" ;
ctx. lineWidth= 5 ;
ctx. strokeStyle= "teal" ;
ctx. beginPath ( ) ;
ctx. moveTo ( 75 , 25 ) ;
ctx. quadraticCurveTo ( 25 , 25 , 25 , 62.5 ) ;
ctx. quadraticCurveTo ( 25 , 100 , 50 , 100 ) ;
ctx. quadraticCurveTo ( 50 , 120 , 30 , 125 ) ;
ctx. quadraticCurveTo ( 60 , 120 , 65 , 100 ) ;
ctx. quadraticCurveTo ( 125 , 100 , 125 , 62.5 ) ;
ctx. quadraticCurveTo ( 125 , 25 , 75 , 25 ) ;
ctx. stroke ( ) ;
}
绘制圆角矩形
var canvas= document. querySelector ( "canvas" ) ;
canvas. width= 800 ;
canvas. height= 600 ;
var ctx= canvas. getContext ( "2d" ) ;
draw ( ) ;
function draw ( ) {
ctx. clearRect ( 0 , 0 , 800 , 600 ) ;
ctx. lineCap= "round" ;
ctx. lineWidth= 5 ;
ctx. strokeStyle= "teal" ;
ctx. beginPath ( ) ;
var x= 100 , y= 100 ;
var width= 200 , height= 100 ;
var radius= 50 ;
ctx. beginPath ( ) ;
ctx. moveTo ( x, y+ radius) ;
ctx. lineTo ( x, y+ height- radius) ;
ctx. quadraticCurveTo ( x, y+ height, x+ radius, y+ height) ;
ctx. lineTo ( x+ width- radius, y+ height) ;
ctx. quadraticCurveTo ( x+ width, y+ height, x+ width, y+ height- radius) ;
ctx. lineTo ( x+ width, y+ radius) ;
ctx. quadraticCurveTo ( x+ width, y, x+ width- radius, y) ;
ctx. lineTo ( x+ radius, y) ;
ctx. quadraticCurveTo ( x, y, x, y+ radius) ;
ctx. stroke ( ) ;
}
绘制立体桃心
三次贝塞尔曲线 canvas bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点,向当前路径添加一个点。 context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 第一个贝塞尔控制点的 x 坐标,第一个贝塞尔控制点的 y 坐标,第二个贝塞尔控制点的 x 坐标, 第二个贝塞尔控制点的 y 坐标, 结束点的 x 坐标, 结束点的 y 坐标。 提示:三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点,第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在,那么请使用 beginPath() 和 moveTo() 方法来定义开始点。 (图片参考:HTML5 canvas quadraticCurveTo() 方法 )
var canvas= document. querySelector ( "canvas" ) ;
canvas. width= 800 ;
canvas. height= 600 ;
var ctx= canvas. getContext ( "2d" ) ;
draw ( ) ;
function draw ( ) {
ctx. clearRect ( 0 , 0 , 800 , 600 ) ;
ctx. lineCap= "round" ;
ctx. lineWidth= 5 ;
ctx. strokeStyle= "rgba(255,0,0,0)" ;
ctx. shadowOffsetX= 3 ;
ctx. shadowOffsetY= 3 ;
ctx. shadowBlur= 7 ;
ctx. shadowColor= "#999" ;
var highlight= ctx. createRadialGradient ( 105 , 58 , 5 , 30 , 30 , 180 ) ;
highlight. addColorStop ( 0 , '#ffffff' ) ;
highlight. addColorStop ( 0.3 , 'tomato' ) ;
ctx. fillStyle= highlight;
ctx. beginPath ( ) ;
ctx. moveTo ( 75 , 40 ) ;
ctx. bezierCurveTo ( 75 , 37 , 70 , 25 , 50 , 25 ) ;
ctx. bezierCurveTo ( 20 , 25 , 20 , 62.5 , 20 , 62.5 ) ;
ctx. bezierCurveTo ( 20 , 80 , 40 , 102 , 75 , 120 ) ;
ctx. bezierCurveTo ( 110 , 102 , 130 , 80 , 130 , 62.5 ) ;
ctx. bezierCurveTo ( 130 , 62.5 , 130 , 25 , 100 , 25 ) ;
ctx. bezierCurveTo ( 85 , 25 , 75 , 37 , 75 , 40 ) ;
ctx. stroke ( ) ;
ctx. fill ( ) ;
}