html5贝塞尔,html5 canvas贝塞尔曲线篇(下)

html5 canvas贝塞尔曲线篇

html5 canvas贝塞尔曲线篇

window.addEventListener('load',eventWindowLoaded,false);

function eventWindowLoaded(){

canvasApp();

}

function canvasSupport(){

return Modernizr.canvas;

}

function canvasApp(){

if(!canvasSupport()){

return;

}else{

var theCanvas = document.getElementById('canvas')

var context = theCanvas.getContext("2d")

}

drawScreen();

function drawScreen(){

context.beginPath();

context.strokeStyle="red";

context.lineWidth=2;

context.moveTo(150,0);

context.bezierCurveTo(0,125,300,175,150,300);

context.stroke();

context.closePath();

//创建多弧点的贝塞尔曲线

context.beginPath();

context.strokeStyle="black";

context.lineWidth=2;

context.moveTo(0,150); //从0,150开始

context.bezierCurveTo(150,0,175,300,300,150);

context.stroke();

context.closePath();

}

}

你的浏览器无法使用canvas

你的支持是我最大的快乐！！

这一篇主要是创建多弧点的贝塞尔曲线

(150,0),(175,300)

记得半年前我看着这2个点的位置看了半天都没反应过来

后来百度贝塞尔曲线的选取点才发现原来是多点的贝塞尔曲线的2个弧度坐标是用起始点和终点的弧度切线这样看的

如下图

html5 canvas贝塞尔曲线篇(上)