html5---canvas

canvas


var context = canvas.getContext('2d')获取2d场景
moveTo方法是将当前位置移动到指定的坐标


lineTo方法是向指定的左边绘制直线


strokeStyle 属性是指定线条的颜色，在本例子中指定为红色


lineWidth 属性设置线条的粗细，这里设置为4px


stroke方法则是将直线显示出来。貌似是之前只是规定了哪里有线条，并没有显示，当调用这个方法后，线条才可以显示。




    直接到fillStyle属性，之前的代码是相同的，不再赘言。


    fillStyle属性设定了填充的颜色、透明度等，如果设置为"rgb(200,0,0)"，则表示一个颜色，不透明；如果设置为"rgba(0,0,200,0.5)"，则表示颜色为rgb(0,0,200)，透明度为50%，


    fillRect方法是绘制一个矩形，这个矩形区域没有边框，只有填充色。这个方法有四个参数，前两个表示左上角的坐标位置，第三个参数为长度，第四个参数为高度。


    strokeRect方法绘制一个带边框的矩形。该方法的四个参数的解释同上。


    clearRect方法是清除一个矩形区域，被清除的区域将没有任何线条。该方法的四个参数的解释同上。




    在获得渲染上下文后，设置了填充色、边框色和边框宽度。


    调用beginPath()方法开始绘制路径


    通过lineTo()方法绘制一个闭合的自定义图形


    调用fill()方法进行填充


    调用stroke()方法设置边框


    调用closePath()方法结束路径的绘制


//select
//得到用户选择的图形组合选项： 
    var selectComponent=document.getElementById("selectCombineMethod"); 
    //取得用户的选择的索引 
    var selectedIndex =selectComponent.selectedIndex; 
    //得到用户的选择的值，也就是选择的图形组合策略 
    var selectedCombinedStrategy = selectComponent.options[selectedIndex].value; 






context.createRadialGradient(x0,y0,r0,x1,y1,r1);
x0 渐变的开始圆的 x 坐标
y0 渐变的开始圆的 y 坐标
r0 开始圆的半径
x1 渐变的结束圆的 x 坐标
y1 渐变的结束圆的 y 坐标
r1 结束圆的半径