图片 7

canvas学习笔记,canvas纯绘制雨伞

 

context.fillRect(100,100,200,100);
}

实用参考: 官方参考文档以及API详细说明:

 

for(var i = 0; i < 50; i++) {
//实验表明translate、scale、rotate都是在原有的context属性上调整的
context.translate(25, 25);
context.scale(0.95, 0.95);
context.rotate(Math.PI / 10);
context.fillRect(0, 0, 100, 50);
}
}


  1. 桃心

var n = 0;
var g2 = context.createLinearGradient(0, 0, 300, 0);
g2.addColorStop(0, ‘rgba(0,0,255,0.5)’); //蓝色
g2.addColorStop(1, ‘rgba(255,0,0,0.5)’); //红色
for(var i = 0; i < 10; i++) {
context.beginPath();
context.fillStyle = g2;
context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
context.closePath();
context.fill();
}
}

  cavas只提供了绘制矩形的API,其他的图形都是靠路径绘制。

<canvas id=”myCanvas” width=”264″ height=”264″ style=”border:red 1px
solid;position:absolute;top:0;left:0″></canvas>

function draw6(id) {
var canvas = document.getElementById(id);
if(canvas == null)
return false;
var context = canvas.getContext(‘2d’);
context.fillStyle = “#EEEEFF”;
context.fillRect(0, 0, 400, 300);
//图形绘制
context.translate(200, 50);
context.fillStyle = ‘rgba(255,0,0,0.25)’;

 

  1. 雨伞

//4分之1园
context.beginPath();
context.moveTo(500, 300); //先移动到圆心 从圆心开始画
context.arc(500, 300, 50, 0, 0.5 * Math.PI, false);

 

说明:网上有高级算法的绘制,很灵活也很方便,如果不是特使情况,千万别用我的方法,请上网右转看别人的案例,哈哈。

<section>
<header>
<h1>发散test(createRadialGradient)</h1></header><canvas
id=”canvas26″ width=”400″
height=”300″></canvas></section>
<section>
<header>
<h1>发散demo(createRadialGradient)</h1></header><canvas
id=”canvas4″ width=”400″ height=”300″></canvas></section>

2.设置单个图形的透明度

    </script>

stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo()
方法定义的路径。默认颜色是黑色。

// 这些 fillStyle 的值均为 ‘橙色’  
ctx.fillStyle = “orange”;  
ctx.fillStyle = “#FFA500”;  
ctx.fillStyle = “rgb(255,165,0)”;  
ctx.fillStyle = “rgba(255,165,0,1)”;  

  1. 五角星

measureText() 返回包含指定文本宽度的对象
strokeText() 在画布上绘制文本(无填充)
context.strokeText(text,x,y,maxWidth);
text 规定在画布上输出的文本。
x 开始绘制文本的 x 坐标位置(相对于画布)。
y 开始绘制文本的 y 坐标位置(相对于画布)。
maxWidth 可选。允许的最大文本宽度,以像素计。*/
function draw17(id){
var canvas = document.getElementById(id);
if(canvas==null){
return false;
}
var context = canvas.getContext(‘2d’);
context.fillStyle = ‘#eeeeff’;
context.fillRect(0,0,400,300);
context.fillStyle = ‘#00f’;
context.font = ‘italic 30px sans-serif’;
context.textBaseline = ‘top’;
//填充字符串
var txt = ‘镜中影花乱舞风’;
context.fillText(txt,0,0);
var length = context.measureText(txt);
context.fillText(‘长’+length.width+’px’,0,50);
context.font = ‘bolid 30px sans-serif’;
txt=’stroke示例文1231231231321字’;
length=context.measureText(txt);
context.strokeText(txt,0,100);
context.fillText(“长” + length.width + “px”, 0, 150);
}

例子如下:

    bezierCurveTo() 方法
 通过使用表示三次贝塞尔曲线的指定控制点,向当前路径添加一个点

/*
bezierCurveTo()
方法通过使用表示三次贝塞尔曲线的指定控制点,向当前路径添加一个点。
提示:三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点,第三个点是曲线的结束点。
曲线的开始点是当前路径中最后一个点。如果路径不存在,那么请使用
beginPath() 和 moveTo() 方法来定义开始点。
开始点:moveTo(20,20)
控制点 1:bezierCurveTo(<20,100>,200,100,200,20)
控制点 2:bezierCurveTo(20,100,<200,100>,200,20)
结束点:bezierCurveTo(20,100,200,100,<200,20>)

function draw() {  
  var ctx = document.getElementById(‘lesson01’).getContext(‘2d’);  
  
  // create new image object to use as pattern  
  var img = new Image();  
  img.src = ‘Penguins.jpg’;  
  img.onload = function(){  
  
    // create pattern  
    var ptrn = ctx.createPattern(img,’repeat’);  
    ctx.fillStyle = ptrn;  
    ctx.fillRect(0,0,150,150);  
  
  }  

☆ canvas画布节点(仅供参考)

context.strokeStyle = ‘blue’; //只是线
context.strokeRect(120, 120, 100, 100);

  参数color可以是表示CSS颜色值的字符串,渐变对象或者图案对象。默认情况下,线条和填充颜色都是黑色(CSS颜色值#000000)。
颜色的字符串表示   下面都是正确的值:

    <canvas> H5标签,只是图形容器,您必须使用脚本来绘制图形。

function draw22(id) {
var canvas = document.getElementById(id);
if(canvas == null) {
return false;
}
var context = canvas.getContext(‘2d’);
context.fillRect(0, 0, 100, 100);
//不设置strokeStyle下的默认strokeStyle=black
context.strokeRect(120, 0, 100, 100);

 

 

gl.addColorStop(0, ‘rgb(255,0,0’); //红
gl.addColorStop(0.5, ‘rgb(0,255,0)’); //绿
gl.addColorStop(1, ‘rgb(0,0,255)’); //蓝

  • context.fillRect(x,y,width,height) : 绘制带填充色的矩形。
  • context.strokeRect(x,y,width,height) : 绘制矩形外框。
  • context.clearRect(x,y,width,height) :
    清空指定的矩形区域,并设置该区域是透明的(Transparent)。
    它们都接受四个参数, x 和 y 指定矩形左上角(相对于原点)的位置,width
    和 height 是矩形的宽和高。

<script type=”text/javascript”>
    
        function draw(id) {
                var canvas=document.getElementById(id);
                if(canvas==null)
                return false;
                var ctx=canvas.getContext(‘2d’);
                ctx.beginPath();
                ctx.moveTo(65,50);
                ctx.lineTo(156,70);
                ctx.lineTo(190,38);
                ctx.bezierCurveTo(222,10,250,40,230,70);
                ctx.lineTo(195,106);
                ctx.lineTo(218,204);
                ctx.lineTo(186,228);
                ctx.lineTo(150,146);
                ctx.lineTo(110,186);
                ctx.bezierCurveTo(118,200,126,220,98,234);
                ctx.lineTo(30,162);
                ctx.bezierCurveTo(30,134,70,140,78,152);
                ctx.lineTo(118,114);
                ctx.lineTo(40,78);
                ctx.lineTo(65,50);
                /*ctx.bezierCurveTo(75,37,70,25,50,25);
                ctx.bezierCurveTo(20,25,22,62.5,22,55);
                ctx.bezierCurveTo(20,80,40,102,75,120);
                ctx.bezierCurveTo(110,102,130,80,128,55);
                ctx.bezierCurveTo(128,55,130,25,100,25);
                ctx.bezierCurveTo(85,25,75,37,75,40);*/
                
                var gradient=ctx.createRadialGradient(0,0,0,0,0,150);
                gradient.addColorStop(0,”rgba(244,28,285,0.1)”);
                gradient.addColorStop(1,”rgba(255,255,255,1)”);
                
                ctx.strokeStyle = “red”;
//设置或返回用于笔触的颜色、渐变
                ctx.stroke();
                
                ctx.fillStyle=gradient;
                ctx.fill();
        }
    </script>

function draw20(id) {
var canvas = document.getElementById(id);
if(canvas == null) {
return false;
}
var context = canvas.getContext(‘2d’);
var interval = setInterval(function() {
move(context);
}, 1);

 

    lineTo() 方法 添加一个新点,然后创建从该点到画布中最后指定点的线条

context.strokeStyle = ‘yellowgreen’; //画线的颜色
context.strokeRect(240, 120, 100, 100); //绘制 线矩形 位置
参数(x轴位置,Y轴位置,宽,高)

work/multipage/the-canvas-element.html
权威开发入门:

<script>
        //function init() {
        
            var canvas = document.getElementById(‘stars’);
            var ctx = canvas.getContext(‘2d’);
            ctx.fillStyle = “#827839”;
            //ctx.shadowColor = “#000000”;
            ctx.shadowOffsetX = 1;
            ctx.shadowOffsetY = 12;
            ctx.shadowBlur = 18;
            
            
            // 开始一条新路径
            ctx.beginPath();
            /*ctx.moveTo(15,150)   +30   -8
            ctx.lineTo(100,140);        // 2
            ctx.lineTo(170,80);            // 3
            ctx.lineTo(230,140);        // 4
            ctx.lineTo(315,150);        // 5
            ctx.lineTo(230,200);        // 6
            ctx.lineTo(300,263);        // 7
            ctx.lineTo(170,220);        // 8
            ctx.lineTo(30,263);            // 9
            ctx.lineTo(100,200);        // 10
            
            //ctx.lineTo(15,150);    // 结束
            ctx.closePath();
            ctx.fill();*/
           
            ctx.moveTo(45,142);        // 起点
            ctx.lineTo(129,126);        // 2
            ctx.lineTo(172,40);            // 3
            ctx.lineTo(215,126);        // 4
            ctx.lineTo(299,142);        // 5
            ctx.lineTo(240,203);        // 6
            ctx.lineTo(252,288);        // 7
            ctx.lineTo(172,252);        // 8
            ctx.lineTo(92,288);            // 9
            ctx.lineTo(105,203);        // 10
            
            //ctx.lineTo(15,150);    // 结束
            ctx.closePath();
            ctx.fill();
        //}
        
        //window.addEventListener(“load”,init.false);
    </script>

context.fillStyle = ‘darkgreen’;
context.fillRect(240, 240, 100, 100);
}

 

    提示:三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点,第三个点是曲线的结束
 
 点。曲线的开始点是当前路径中最后一个点。如果路径不存在,那么请使用 beginPath() 和 moveTo() 方
    法来定义开始点。

function draw4(id) {
var canvas = document.getElementById(id);
if(canvas == null)
return false;
var context = canvas.getContext(‘2d’);
var g1 = context.createRadialGradient(400, 0, 0, 400, 0, 400);
g1.addColorStop(0.1, ‘rgb(255,255,0)’);
g1.addColorStop(0.3, ‘rgb(255,0,255)’);
g1.addColorStop(1, ‘rgb(0,255,255)’);
context.fillStyle = g1;
context.fillRect(0, 0, 400, 300);
var n = 0;
// var g2 = context.createRadialGradient(250, 250, 0, 250, 250, 300);
// g2.addColorStop(0.1, ‘rgba(255,0,0,0.5)’);
// g2.addColorStop(0.7, ‘rgba(255,255,0,0.5)’);
// g2.addColorStop(1, ‘rgba(0,0,255,0.5)’);
for(var i = 0; i < 10; i++) {
var g2 = context.createRadialGradient(i * 25, i * 25, 0, i * 25, i *
25, i * 10);
g2.addColorStop(0.1, ‘rgba(255,0,0,0.5)’);
g2.addColorStop(0.7, ‘rgba(255,255,0,0.5)’);
g2.addColorStop(1, ‘rgba(0,0,255,0.5)’);

最后这一步是调用 stroke或 fill方法,这时,图形才是实际的绘制到 canvas
上去。

 

context.fillStyle = ‘green’; //画纯色的 全填充的颜色
context.fillRect(240, 0, 100, 100); //绘制 线矩形 位置
参数(x轴位置,Y轴位置,宽,高)

一个复杂的例子如下:

   
为了满足需求不能写运算纯手写,感觉真的很浪费时间,只有自己踩过的坑,才不想看到别人也被坑。我很懒,也想过弄个工具,目前先放代码吧,方便需要的人copy。

context.fillStyle = “red”;
//平移 缩放 旋转 1 2 3
context.translate(100, 100);
context.scale(0.5, 0.5);
context.rotate(Math.PI / 4);
context.fillRect(0, 0, 100, 100);

 

图片 1

context.fillStyle = ‘darkgreen’;
context.fillRect(240, 240, 100, 100);

绘制矩形的例子如下:

 

<section>
<header>
<h1>贝塞尔曲线test</h1></header><canvas
id=”canvas24″ width=”400″
height=”400″></canvas></section>
<section>
<header>
<h1>贝塞尔曲线demo</h1></header><canvas
id=”canvas2″ width=”400″ height=”400″></canvas></section>

context.shadowOffsetX = float
context.shadowOffsetY = float
context.shadowBlur = float
context.shadowColor = color

 

function draw26(id) {

例子如下所示:

  1. 飞机

function draw11(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext(“2d”);
context.fillStyle = “#EEEEFF”;
context.fillRect(0, 0, 400, 300);

 图片 2

图片 3

}
//createLinearGradient() 创建线性渐变(用在画布内容上)
定义从黑到白的渐变(从左向右),作为矩形的填充样式:
//四个参数 context.createLinearGradient(x0,y0,x1,y1);
/*x0 渐变开始点的 x 坐标
y0 渐变开始点的 y 坐标
x1 渐变结束点的 x 坐标
y1 渐变结束点的 y 坐标*/

 

<script type=”text/javascript”>
    
        function draw(id) {
                var canvas=document.getElementById(id);
                if(canvas==null)
                return false;
                var ctx=canvas.getContext(‘2d’);
                ctx.beginPath();
                
                // 小雨点
                ctx.moveTo(47,32);
                ctx.bezierCurveTo(40,42,38,56,46,60);
                ctx.bezierCurveTo(64,52,50,40,47,32);
                
                // 大雨点
                ctx.moveTo(78,32);
                ctx.bezierCurveTo(70,44,62,66,78,70);
                ctx.bezierCurveTo(104,60,80,40,78,32);
                
                // 伞身
                ctx.moveTo(44,118);
                ctx.bezierCurveTo(48,114,50,90,72,76);
                ctx.bezierCurveTo(82,82,104,70,102,54);
                ctx.bezierCurveTo(138,26,222,76,224,118);
                ctx.lineTo(146,118);
                ctx.lineTo(146,200);
                
                ctx.bezierCurveTo(147,212,162,216,162,192);
                ctx.bezierCurveTo(168,188,172,186,178,192);
                ctx.bezierCurveTo(180,200,182,218,162,231);
                ctx.bezierCurveTo(154,240,116,226,122,200);
                
                ctx.lineTo(122,118);
                ctx.lineTo(44,118);
                var gradient=ctx.createRadialGradient(0,0,0,0,0,150);
                gradient.addColorStop(0,”rgba(244,28,285,0.1)”);
                gradient.addColorStop(1,”rgba(255,255,255,1)”);
                
                ctx.strokeStyle = “red”;
//设置或返回用于笔触的颜色、渐变
                ctx.stroke();
                
                ctx.fillStyle=gradient;
                ctx.fill();
        }
    </script>

context.strokeStyle = ‘rgba(255,0,0,0.2)’;
context.strokeRect(120, 240, 100, 100);

function draw() {
  var ctx = document.getElementById(‘lesson01’).getContext(‘2d’);
  roundedRect(ctx,12,12,150,150,15);
  roundedRect(ctx,19,19,150,150,9);
  roundedRect(ctx,53,53,49,33,10);
  roundedRect(ctx,53,119,49,16,6);
  roundedRect(ctx,135,53,49,33,10);
  roundedRect(ctx,135,119,25,49,10);

<script type=”text/javascript”>
        function draw(id) {
                var canvas=document.getElementById(id);
                if(canvas==null)
                return false;
                var ctx=canvas.getContext(‘2d’);
                ctx.beginPath();
                ctx.moveTo(75,40);
                ctx.bezierCurveTo(75,37,70,25,50,25);
                ctx.bezierCurveTo(20,25,22,62.5,22,55);
                ctx.bezierCurveTo(20,80,40,102,75,120);
                ctx.bezierCurveTo(110,102,130,80,128,55);
                ctx.bezierCurveTo(128,55,130,25,100,25);
                ctx.bezierCurveTo(85,25,75,37,75,40);
                var gradient=ctx.createRadialGradient(0,0,0,0,0,150);
                gradient.addColorStop(0,”rgba(244,28,285,0.5)”);
                gradient.addColorStop(1,”rgba(255,255,255,1)”);
                ctx.fillStyle=gradient;
                ctx.fill();
        }

//四分之3 园
context.beginPath();
context.arc(100, 300, 50, 0, 1.5 * Math.PI, false);
context.fillStyle = ‘rgba(255,0,0,0.25)’;
context.fill();
context.strokeStyle = ‘rgba(255,0,0,0.25)’;
context.closePath();
context.stroke();

图片 4如果你要给每个图形上不同的颜色,你需要重新设置
fillStyle或strokeStyle
的值,就像我们画画时需要不断换不同颜色的颜料一样。
设置透明度 1.设置全局透明度:context.globalAlpha = transparency value。
  这个属性影响到 canvas 里所有图形的透明度,有效的值范围是 0.0
(完全透明)到 1.0(完全不透明),默认是 1.0。例子如下所示:

个人公众号(ZEROFC_DEV),关于web开发的,欢迎关注O(∩_∩)O~

<section>
<header>
<h1>简单动画</h1></header><canvas id=”canvas20″
width=”400″ height=”300″></canvas></section>

设置画笔的类型 画笔粗细:context.lineWidth = value
  这个属性设置当前绘线的粗细。属性值必须为正数。默认值是1.0。

由于网上很多都是用很多算法和逻辑使用canvas进行绘制,但有时也无法解决一些小众需求

//设置透明度实践证明透明度>0,<1值越低 越透明 值》=1时为纯色
值《=0时为完全透明
context.fillStyle = ‘rgba(255,0,0,0.2)’;
context.fillRect(0, 240, 100, 100);

  ctx.beginPath();
  ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false); //chiensexu  ???true??,??
  ctx.lineTo(31,37);
  ctx.fill();
  for(i=0;i<8;i++){
    ctx.fillRect(51+i*16,35,4,4);
  }
  for(i=0;i<6;i++){
    ctx.fillRect(115,51+i*16,4,4);
  }
  for(i=0;i<8;i++){
    ctx.fillRect(51+i*16,99,4,4);
  }
  ctx.beginPath();
  ctx.moveTo(83,116);
  ctx.lineTo(83,102);
  ctx.bezierCurveTo(83,94,89,88,97,88);
  ctx.bezierCurveTo(105,88,111,94,111,102);
  ctx.lineTo(111,116);
  ctx.lineTo(106.333,111.333);
  ctx.lineTo(101.666,116);
  ctx.lineTo(97,111.333);
  ctx.lineTo(92.333,116);
  ctx.lineTo(87.666,111.333);
  ctx.lineTo(83,116);
  ctx.fill();
  ctx.fillStyle = “white”;
  ctx.beginPath();
  ctx.moveTo(91,96);
  ctx.bezierCurveTo(88,96,87,99,87,101);
  ctx.bezierCurveTo(87,103,88,106,91,106);
  ctx.bezierCurveTo(94,106,95,103,95,101);
  ctx.bezierCurveTo(95,99,94,96,91,96);
  ctx.moveTo(103,96);
  ctx.bezierCurveTo(100,96,99,99,99,101);
  ctx.bezierCurveTo(99,103,100,106,103,106);
  ctx.bezierCurveTo(106,106,107,103,107,101);
  ctx.bezierCurveTo(107,99,106,96,103,96);
  ctx.fill();
  ctx.fillStyle = “black”;
  ctx.beginPath();
  ctx.arc(101,102,2,0,Math.PI*2,true);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(89,102,2,0,Math.PI*2,true);
  ctx.fill();
}

<section><header><h1>绘制文字fillText
strokeText</h1></header><canvas id=”canvas17″ width=”400″
height=”300″></canvas></section>
<section><header><h1>绘图状态的保存save与恢复restore</h1></header><canvas
id=”canvas18″ width=”400″
height=”300″></canvas></section>
<section><header><h1>保存文件canvas.toDataURL</h1></header><canvas
id=”canvas19″ width=”400″
height=”300″></canvas></section>
</body>

function draw() {  
  var ctx = document.getElementById(‘lesson01’).getContext(‘2d’);  
  
  // Create gradients  
  var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);  
  radgrad.addColorStop(0, ‘#A7D30C’);  
  radgrad.addColorStop(0.9, ‘#019F62’);  
  radgrad.addColorStop(1, ‘rgba(1,159,98,0)’);  
    
  var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);  
  radgrad2.addColorStop(0, ‘#FF5F98’);  
  radgrad2.addColorStop(0.75, ‘#FF0188’);  
  radgrad2.addColorStop(1, ‘rgba(255,1,136,0)’);  
  
  var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);  
  radgrad3.addColorStop(0, ‘#00C9FF’);  
  radgrad3.addColorStop(0.8, ‘#00B5E2’);  
  radgrad3.addColorStop(1, ‘rgba(0,201,255,0)’);  
  
  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);  
  radgrad4.addColorStop(0, ‘#F4F201’);  
  radgrad4.addColorStop(0.8, ‘#E4C700’);  
  radgrad4.addColorStop(1, ‘rgba(228,199,0,0)’);  
    
  // draw shapes  
  ctx.fillStyle = radgrad4;  
  ctx.fillRect(0,0,150,150);  
  ctx.fillStyle = radgrad3;  
  ctx.fillRect(0,0,150,150);  
  ctx.fillStyle = radgrad2;  
  ctx.fillRect(0,0,150,150);  
  ctx.fillStyle = radgrad;  
  ctx.fillRect(0,0,150,150);  
}  

//整个园
context.beginPath();
context.arc(300, 300, 50, 0, 2 * Math.PI, false);
context.fillStyle = ‘rgba(255,0,0,0.25)’;
context.fill();
context.strokeStyle = ‘rgba(255,0,0,0.25)’;
context.closePath();
context.stroke();

绘制矩形路径:context.rect(x, y, width, height)
  当rect方法被调用时,moveTo方法会自动被调用,参数为(0,0),于是起始坐标又恢复成初始原点了。
4.关闭路径
方法:使用context.closePath()关闭路径。

//清除矩形
context.clearRect(0, 0, 360, 360)

三、路径绘图

<section>
<header>
<h1>平移 test(translate)缩放(scale)
旋转(rotate)</h1></header><canvas id=”canvas5″
width=”400″ height=”500″></canvas></section>
<section>
<header>
<h1>平移 demo(translate)缩放(scale)
旋转(rotate)</h1></header><canvas id=”canvas6″
width=”400″ height=”300″></canvas></section>

  • 设置填充色:context.fillStyle = color
  • 设置轮廓色:context.strokeStyle = color

var s = 50;
//创建路径
context.beginPath();
context.fillStyle = ‘rgba(255,0,0,0.5)’;
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 5 * 4;
for(var i = 0; i < 5; i++) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.lineTo(dx + x * s, dy + y * s);
}
context.rotate(Math.PI / 12);
context.closePath();
}

  color 参数必须是一个有效的 CSS 颜色值(如 #FFF,
rgba(0,0,0,1),等等)。
  可以根据需要添加任意多个色标(color
stops),也就是说渐变的色彩数目是任意的。但是要注意保持色标定义顺序和它理想的顺序一致,特别是当色标的位置重叠的时候。
3.把渐变对象赋给图形的fillStyle或strokeStyle属性。

//设置透明度实践证明透明度>0,<1值越低 越透明 值》=1时为纯色
值《=0时为完全透明
context.fillStyle = ‘rgba(255,0,0,0.2)’;
context.fillRect(0, 240, 100, 100);

  除了这种方式,还可以使用绘制路径的方式绘制矩形,这个参看路径绘图部分。

<!DOCTYPE html>
<html>

绘制一个图形主要的过程如下:
1.启动路径
方法:使用context.beginPath()启动路径绘图。
  在内存里,路径是以一组子路径(直线,弧线等)的形式储存的,它们共同构成一个图形。每次调用
beginPath,子路径组都会被重置,然后可以绘制新的图形。
2.移动画笔到起点
方法:使用moveTo(x, y)移动画笔。
  虽然大多数画图的时候,用不到这个方法。我们也不能用这个方法来画什么,但是你可以把它想象成是把笔提起,并从一个点移动到另一个点的过程。当你绘制不联系的路径的时候,你就会有这个动作了。
当 canvas 初始化或者调用 beginPath
的时候,起始坐标设置就是原点(0,0)。有时候,我们需要moveTo方法将起始坐标移至其它地方,用于绘制不连续的路径。
3.内存中绘制线段
画直线:lineTo(x, y)
  该方法接受终点的坐标(x,y)作为参数。起始坐标取决于前一路径,前一路径的终点即当前路径的起点,起始坐标通常也可以通过moveTo方法来设置。
画圆弧:arc(x, y, radius, startAngle, endAngle, anticlockwise)
  我们用 arc 方法来绘制弧线或圆,方法接受五个参数:x,y
是圆心坐标,radius 是半径,startAngle 和 endAngle 分别是起末弧度(以 x
轴为基准),anticlockwise 为 true 表示逆时针,反之顺时针。
注意:arc
方法里用到的角度是以弧度为单位而不是度。度和弧度直接的转换可以用这个表达式:var
radians = (Math.PI/180)*degrees;
画二次贝塞尔曲线:quadraticCurveTo(cp1x, cp1y, x, y)
画三次贝塞尔曲线:bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
  贝塞尔曲线
,它可以是二次和三次方的形式,一般用于绘制复杂而有规律的形状。它们都有一个起点一个终点(下图中的蓝点),但二次方贝塞尔曲线只有一个(红色)控制点点)而三次方贝塞尔曲线有两个。
  参数x和y是终点坐标,cp1x和
cp1y是第一个控制点的坐标,cp2x和cp2y是第二个的。
  使用二次方和三次方的贝塞尔曲线是相当有挑战的,因为缺少直观性。理论上只要有耐心,再复杂的图形都可以绘制出来的。

/* shadowOffsetX 设置或返回阴影距形状的水平距离
:绘制一个矩形,带有向右偏移 具体 像素的阴影(从矩形的 left 位置):
shadowOffsetY 设置或返回阴影距形状的垂直距离:绘制一个矩形,带有向下偏移
具体 像素的阴影(从矩形的 top 位置):
shadowColor 设置或返回用于阴影的颜色
shadowBlur 设置或返回用于阴影的模糊级别*/
function draw27(id){
var canvas = document.getElementById(id);
if(canvas == null){
return flase;
}
var context = canvas.getContext(‘2d’);
context.shadowOffsetX = 10;
context.shadowOffsetX = 10;
context.shadowColor = ‘rgba(100,100,100,0.5)’;
context.shadowBlur = 1.5;
context.fillStyle = ‘rgba(255,0,0,0.5)’;

2.pattern赋给fillStyle或strokeStyle属性。

//不同圆心看径向渐变模型
var canvas = document.getElementById(id);
if(canvas == null) {
return false;
}
var context = canvas.getContext(‘2d’);
var gl = context.createRadialGradient(100, 150, 10, 300, 150, 50);
gl.addColorStop(0.1, ‘rgb(255,0,0)’);
gl.addColorStop(0.5, ‘rgb(0,255,0)’);
gl.addColorStop(1, ‘rgb(0,0,255)’);
context.fillStyle = gl;
context.fillRect(0, 0, 400, 300);
}

创建阴影效果(目前Google Chrome 16.0.912.75还是不支持的)
  主要是设置一下阴影效果的相关属性值:

function draw5(id) {
var canvas = document.getElementById(id);
if(canvas == null) {
return false;
}
var context = canvas.getContext(‘2d’);
context.save(); //保存了当前context的状态
context.fillStyle = ‘#eeeeff’;
context.fillRect(0, 0, 400, 300);

  该方法它会尝试用直线连接当前端点与起始端点来关闭路径,但如果图形已经关闭或者只有一个点,它会什么都不做,这一步在某些情况并不是必须的,比如使用fill()绘制实际图形的时候,就不需要先调用closePath。
5.绘制路径到canvas
画图形边框:context.stroke()
填充实心图形:context.fill()

function draw18(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext(“2d”);
context.fillStyle = “red”;
context.save(); //保存了当前context的状态
context.fillStyle = “black”;
context.fillRect(0, 0, 100, 100);
context.restore();//恢复到刚刚保存的状态
context.fillRect(0,120,100,100);
}
window.onload = function() {
draw21(“canvas21”);
draw22(“canvas22”);
draw23(“canvas23”);
draw1(“canvas1”);
draw8(“canvas8”);
draw2(“canvas2”);
draw24(“canvas24”);
draw5(“canvas5”);
draw6(“canvas6”);
draw7(“canvas7”);
draw20(“canvas20”);
draw25(“canvas25”);
draw3(“canvas3”);
draw26(“canvas26”);
draw4(“canvas4”);
draw27(“canvas27”);
draw11(“canvas11”);
draw17(“canvas17”);
draw18(“canvas18”);
};
</script>
</head>

  很简单,把rgba格式的字符串赋给fillStyle或者strokeStyle就可以了。
创建渐变色   canvas中我们也可以用线性或者径向的渐变来填充或描边。创建渐变色要经过下面几个步骤:
1.创建渐变对象:

/*addColorStop() 规定渐变对象中的颜色和停止位置
addColorStop(stop,color);
stop 介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置。
color 在结束位置显示的 CSS 颜色值*/
function draw25(id) {
var canvas = document.getElementById(id);
if(canvas == null) {
return false;
}
var context = canvas.getContext(‘2d’);
var gl = context.createLinearGradient(0, 0, 0, 300);

function draw3() {  
  var ctx = document.getElementById(‘lesson01’).getContext(‘2d’);  
  
  ctx.shadowOffsetX = 3;  
  ctx.shadowOffsetY = 3;  
  ctx.shadowBlur = 3;  
  ctx.shadowColor = “rgba(100, 100, 0, 0.5)”;  
   
  ctx.font = “20px Times New Roman”;  
  ctx.fillStyle = “Black”;  
  ctx.fillText(“Sample String”, 5, 30);  
}  

//设置纯色
context.fillStyle = ‘red’; //全部填充 纯色
context.fillRect(0, 120, 100, 100);

shadowOffsetX和shadowOffsetY用来设定阴影在X和Y轴的延伸距离,它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸,正值则表示会往下或右延伸,他们默认都是0。
shadowBlur用于设定阴影的模糊程度,其数值并不跟像素数量挂钩,也不受变换矩阵的影响,默认为0。
shadowColor用于设定阴影效果的延伸,值可以是标准的CSS颜色值,默认是全透明的黑色。

var dx = 150;
var dy = 150;
var s = 100;
context.beginPath();
context.fillStyle = ‘rgb(0,0,100)’;
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 15 * 11;
for(var i = 0; i < 60; i++) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.lineTo(dx + x * s, dy + y * s);
}
context.closePath();
context.fill();
context.stroke();

 

strokeRect方法绘制矩形
strokeStyle设置边缘线的颜色 或者渐变模式
context.strokeRect(x,y,width,height);

二、绘制简单矩形   矩形是唯一的基本图形,canvas提供了直接的API支持。

context.fillStyle = ‘green’; //画纯色的 全填充的颜色
context.fillRect(240, 0, 100, 100); //绘制 线矩形 位置
参数(x轴位置,Y轴位置,宽,高)

function draw(){
  var canvas = document.getElementById(‘tutorial’);
  if (canvas.getContext){
    var ctx = canvas.getContext(‘2d’);

textBaseline 设置或返回在绘制文本时使用的当前文本基线
alphabetic 默认。文本基线是普通的字母基线。
top 文本基线是 em 方框的顶端。。
hanging 文本基线是悬挂基线。
middle 文本基线是 em 方框的正中。
ideographic 文本基线是表意基线。
bottom 文本基线是 em 方框的底端。

function roundedRect(ctx,x,y,width,height,radius){
  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();
}

context.fillStyle = “#EEEEFF”;
context.fillRect(0, 0, 400, 300);
//图形绘制
context.translate(200, 50);
for(var i = 0; i < 50; i++) {
context.translate(25, 25);
context.scale(0.95, 0.95);
context.rotate(Math.PI / 10);
create5Star(context);
context.fill();
}
}
//画五角星
function create5Star(context) {
var n = 0;
var dx = 100;
var dy = 0;

    ctx.fillRect(25,25,100,100);
    ctx.clearRect(45,45,60,60);
    ctx.strokeRect(50,50,50,50);
  }
}

context.strokeStyle = ‘rgba(255,0,0,0.2)’;
context.strokeRect(120, 240, 100, 100);

图片 5

//半圆
context.beginPath();
context.arc(300, 150, 50, 0, 1 * Math.PI, false);
context.fillStyle = ‘rgba(255,0,0,0.25)’;
context.fill();
context.strokeStyle = ‘rgba(255,0,0,0.25)’;
context.closePath();
context.stroke();

 

function draw8(id) {
var canvas = document.getElementById(id);
if(canvas == null) {
return false;
}
var context = canvas.getContext(‘2d’);
context.strokeStyle = ‘rgb(250,0,0)’;
context.fillStyle = ‘rgb(250,0,0)’;
//实验证明第一次lineTo的时候功能和moveTo一样
context.lineTo(100, 100); //第一次的时候 点移动到了100 100
//之后的lineTo会以上次lineTo的节点为开始
context.lineTo(200, 200); //从100 100到200 200 画了一条线
context.lineTo(200, 100); //又画到了200 100
context.moveTo(200, 50); //点移动到了200 50
context.lineTo(100, 50); //从200 50到100 50画了一条线
context.stroke();
}

创建图案填充效果 简单两步即搞定。
1.创建图案pattern:context.createPattern(image,type)
  该方法接受两个参数。Image 可以是一个 Image 对象的引用,或者另一个
canvas 对象。Type 必须是下面的字符串值之一:repeat,repeat-x,repeat-y
和 no-repeat。

//不设置fillstyle下的默认fillstyle=black;
context.fillRect(0, 0, 100, 100);
//不设置strokeStyle下的默认strokeStyle=black
context.strokeRect(120, 0, 100, 100);

function draw6() {  
  var ctx = document.getElementById(‘lesson01’).getContext(‘2d’);  
  var lineCap = [‘butt’,’round’,’square’];  
  
  // Draw guides  
  ctx.strokeStyle = ‘#09f’;  
  ctx.beginPath();  
  ctx.moveTo(10,10);  
  ctx.lineTo(140,10);  
  ctx.moveTo(10,140);  
  ctx.lineTo(140,140);  
  ctx.stroke();  
  
  // Draw lines  
  ctx.strokeStyle = ‘black’;  
  for (var i=0;i<lineCap.length;i++){  
    ctx.lineWidth = 15;  
    ctx.lineCap = lineCap[i];  
    ctx.beginPath();  
    ctx.moveTo(25+i*50,10);  
    ctx.lineTo(25+i*50,140);  
    ctx.stroke();  
  }  
}  
function draw() {  
  var ctx = document.getElementById(‘lesson01’).getContext(‘2d’);  
  var lineJoin = [’round’,’bevel’,’miter’];  
  ctx.lineWidth = 10;  
  for (var i=0;i<lineJoin.length;i++){  
    ctx.lineJoin = lineJoin[i];  
    ctx.beginPath();  
    ctx.moveTo(-5,5+i*40);  
    ctx.lineTo(35,45+i*40);  
    ctx.lineTo(75,5+i*40);  
    ctx.lineTo(115,45+i*40);  
    ctx.lineTo(155,5+i*40);  
    ctx.stroke();  
  }  
}  

function move(context) {
context.clearRect(0, 0, 400, 300);
context.fillStyle = “#EEEEFF”;
context.fillRect(0, 0, 400, 300);
context.fillStyle = “red”;
context.fillRect(x, y, w, h);
if(mx == 0) {
x = x + ml;
if(x >= cw – w) {
mx = 1;
}
} else {
x = x – ml;
if(x <= 0) {
mx = 0;
}
}
if(my == 0) {
y = y + ml;
if(y >= ch – h) {
my = 1;
}
} else {
y = y – ml;
if(y <= 0) {
my = 0;
}
}

  线宽是指给定路径的中心到两边的粗细。换句话说就是在路径的两边各绘制线宽的一半。因为画布的坐标并不和像素直接对应,当需要获得精确的水平或垂直线的时候要特别注意。
端点样式:context.lineCap = type
  属性 lineCap
的指决定了线段端点显示的样子。它可以为下面的三种的其中之一:butt,round
和 square。默认是
butt。每种设置完的效果如下图lineCap部分从左到右所示。
连接点样式:context.lineJoin = type
  lineJoin
的属性值决定了图形中两线段连接处所显示的样子。它可以是这三种之一:round,
bevel 和 miter。默认是
miter。每种设置完的效果如下图lineJoin部分从上到下所示。
斜面连接限制:context.miterLimit = value
  当应用miter效果时,线段的外侧边缘会延伸交汇于一点上。线段直接夹角比较大的,交点不会太远,但当夹角减少时,交点距离会呈指数级增大。这时可以用miterLimit属性设定外延交点与连接点的最大距离,如果交点距离大于此值,连接效果会变成了
bevel。

quadraticCurveTo()
方法通过使用表示二次贝塞尔曲线的指定控制点,向当前路径添加一个点。
提示:二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点,第二个点是曲线的结束点。
曲线的开始点是当前路径中最后一个点。如果路径不存在,那么请使用
beginPath() 和 moveTo() 方法来定义开始点。
开始点:moveTo(20,20)
控制点:quadraticCurveTo(<20,100>,200,20)
结束点:quadraticCurveTo(20,100,<200,20>)
* */
function draw24(id) {
var canvas = document.getElementById(id);
if(canvas == null) {
return false;
}
var context = canvas.getContext(‘2d’);
context.strokeStyle = ‘rgb(255,0,0)’;
context.moveTo(50, 50);
context.bezierCurveTo(50, 50, 150, 50, 150, 150);
context.stroke();
context.quadraticCurveTo(150, 250, 250, 250);
context.stroke();
}

  canvas只支持一种基本形状——矩形,所有其它形状都是通过一个或多个路径组合而成,甚至是基本的矩形也可以通过路径组合成。
一、设置画笔属性   设想我们生活中画图的样子,我们首先是选取合适的颜料和笔,一样的道理,在canvas中画图同样也是根据需要,不断的去设置当前使用的颜色和线条类型。
设置当前使用的颜色
  
任何封闭的图形都是有轮廓部分和填充部分组成。设置当前的颜色也是分两部分设置:

context.beginPath();
context.fillStyle = g2;
context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
context.fill();
}
}

图片 6调用stroke之前必须要先调用关闭路径方法closePath。而调用fill之前不需要调用closePath关闭路径,调用fill时路径会自动闭合。

<section>
<header>
<h1>画线test(lineTo moveTo)</h1></header><canvas
id=”canvas8″ width=”400″
height=”400″></canvas></section>
<section>
<header>
<h1>画线demo(lineTo moveTo)</h1></header><canvas
id=”canvas1″ width=”400″ height=”400″></canvas></section>

function draw2() {  
  var ctx = document.getElementById(‘lesson01’).getContext(‘2d’);  
  // draw background  
  ctx.fillStyle = ‘#FD0’;  
  ctx.fillRect(0,0,75,75);  
  ctx.fillStyle = ‘#6C0’;  
  ctx.fillRect(75,0,75,75);  
  ctx.fillStyle = ‘#09F’;  
  ctx.fillRect(0,75,75,75);  
  ctx.fillStyle = ‘#F30’;  
  ctx.fillRect(75,75,75,75);  
  ctx.fillStyle = ‘#FFF’;  
  
  // set transparency value  
  ctx.globalAlpha = 0.2;  
  
  // Draw semi transparent circles  
  for (var i=0;i<7;i++){  
      ctx.beginPath();  
      ctx.arc(75,75,10+10*i,0,Math.PI*2,true);  
      ctx.fill();  
  }  
}  

<section>
<header>
<h1>给图像绘制阴影test shadowOffsetX(阴影的横向位移量)
shadowOffsetY(盈盈的纵向位移量) shadowColor(阴影的颜色)
shadowBlur(阴影的模糊范围)</h1></header><canvas
id=”canvas27″ width=”400″
height=”300″></canvas></section>
<section>
<header>
<h1>给图像绘制阴影demo shadowOffsetX(阴影的横向位移量)
shadowOffsetY(盈盈的纵向位移量) shadowColor(阴影的颜色)
shadowBlur(阴影的模糊范围)</h1></header><canvas
id=”canvas11″ width=”400″ height=”400″></canvas>
</section>

图片 7

//设置纯色
context.fillStyle = ‘red’; //全部填充 纯色
context.fillRect(0, 120, 100, 100);

  • 线性渐变:context.createLinearGradient(x1,y1,x2,y2)
    方法接受4个参数,表示渐变的起点(x1,y1) 与终点(x2,y2)。
  • 径向渐变:context.createRadialGradient(x1,y1,r1,x2,y2,r2)
    方法接受6个参数,前三个定义一个以(x1,y1)为原点,半径为r1的圆,后三个参数则定义另一个以(x2,y2)为原点,半径为r2的圆。

<section>
<header>
<h1>线性test(createLinearGradient
addColorStop)</h1></header><canvas id=”canvas25″
width=”400″ height=”300″></canvas></section>
<section>
<header>
<h1>线性demo(createLinearGradient
addColorStop)</h1></header><canvas id=”canvas3″
width=”400″ height=”300″></canvas></section>

2.给渐变对象上色:
  上色:gradientObject.addColorStop(position, color)
  方法接受2个参数,position 参数必须是一个 0.0 与 1.0
之间的数值,表示渐变中颜色所在的相对位置。例如,0.5
表示颜色会出现在正中间;如果第一个色标的该参数值不是0.0,则渐变会默认认为从起点到第一个色标之间都是黑色。

<section>
<header>
<h1>坐标与路径结合使用</h1></header><canvas
id=”canvas7″ width=”400″ height=”400″></canvas></section>

结果如下:

var n = 0;
var g2 = context.createLinearGradient(0,0,0,0);
g2.addColorStop(0,’rgba(0,0,255,0.5)’);//蓝色
g2.addColorStop(1,’rgba(255,0,0,0.5)’);//红色
for(var i = 0;i<10;i++){
context.beginPath();
context.fillStyle=g2;
context.arc(i*25,i*25,i*10,0,Math.pi*2,true);
context.closePath();
context.fill();
}

  两个方法返回响应的渐变对象,下面就可以给这个对象添加渐变颜色了。

<section>
<header>
<h1>绘制路径</h1></header><canvas id=”canvas23″
width=”800″ height=”400″></canvas></section>

}

//moveTo() 把路径移动到画布中的指定点,不创建线条
//lineTo() 添加一个新点,然后在画布中创建从该点到最后指定点的线条
/*
实例
开始一条路径,移动到位置 0,0。创建到达位置 300,150 的一条线:
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

var x = 100; //矩形开始坐标
var y = 100; //矩形结束坐标
var mx = 0; //0右 1左
var my = 0; //0下 1上
var ml = 5; //每次移动的长度
var w = 20; //矩形宽度
var h = 20; //矩形高度
var cw = 400; //canvas宽度
var ch = 300; //canvas高度

//可以把gl对象理解成GDI中线性brush
context.fillStyle = gl;
//在用这个brush来画正方形
context.fillRect(0, 0, 400, 300);

}

context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = ‘rgba(100,100,100,0.5)’;
context.shadowBlur =5;
//图形绘制
context.translate(0, 50);
for (var i = 0; i < 3; i++) {
context.translate(50, 50);
create5Star(context);
context.fill();
}
}
/* font 设置或返回文本内容的当前字体属性
ctx.font=”40px Arial”;在画布上写一段 40 像素的文本,使用的字体是
“Arial”

}
/* function draw3(id){
var canvas = document.getElementById(id);
if(canvas == null){
return false;
}
var context = canvas.getContext(‘2d’);
var gl = context.createLinearGradient(0,0,0,300);
gl.addColorStop(0,’rgb(255,255,0)’);//浅绿
gl.addColorStop(1,’rgb(0,255,255)’);//浅蓝
context.fillStyle = gl;
context.fillRect(0,0,400,300);

context.restore(); //恢复到刚刚保存的状态,保存恢复 只能用1次
context.save(); //保存了
context.fillStyle = ‘green’;
//平移 旋转 缩放 2 1 3
context.translate(300, 100);
context.rotate(Math.PI / 4);
context.scale(0.5, 0.5);
context.fillRect(0, 0, 100, 100);

</html>

}

context.restore(); //恢复到刚刚保存的状态,保存恢复 只能用1次
context.save(); //保存了
context.fillStyle = ‘orange’;
//平移 旋转 缩放 3 1 2
context.translate(200, 200);
context.rotate(Math.PI / 4);
context.scale(0.5, 0.5);
context.fillRect(0, 0, 100, 100);

//同一圆心画球形
/*var canvas = document.getElementById(id);
if(canvas == null){
return false;
}
var context = canvas.getContext(‘2d’);
var gl = context.createRadialGradient(200,150,0,200,150,100);
gl.addColorStop(0.1,’rgb(255,0,0)’);
gl.addColorStop(1,’rgb(50,0,0)’);
context.fillStyle = gl;
context.beginPath();
context.arc(200,150,100,0,Math.pictureSizes,true);
context.closePath();
context.fill();*/

function draw7(id) {
var canvas = document.getElementById(id);
var context = canvas.getContext(“2d”);

context.restore(); //恢复到刚刚保存的状态,保存恢复 只能用1次
context.save(); //保存了
context.fillStyle = ‘yellow’;
//平移 旋转 缩放 2 3 1
context.translate(200, 100);
context.rotate(Math.PI / 4);
context.scale(0.5, 0.5);
context.fillRect(0, 0, 100, 100);

}
/*
画圆
context.beginPath() 起始一条路径,或重置当前路径
arc 创建弧/曲线(用于创建圆形或部分圆)
context.arc(x,y,r,sAngle,eAngle,counterclockwise)
(x,y,半径,起始角(以弧度计算 弧的圆形的三点钟位置是 0
度),结束角(以弧度计算),可选,规定应该逆时针还是顺时针绘图。False =
顺时针,true = 逆时针。)
closePath 创建从当前点回到起始点的路径

<head>
<meta charset=”utf-8″ />
<title></title>
<script type=”text/javascript”>
/*
*
设置fillStyle属性可以是CSS颜色,渐变,或图案。fillStyle
默认设置是#000000(黑色)。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

//清除矩形 context.clearRect(0,0,360,360)
其实就是一个更大的矩形把其他的覆盖掉
*
* */
function draw21(id) {
var canvas = document.getElementById(id);
if(canvas == null) {
return false;
};
var context = canvas.getContext(‘2d’);

<body>
<section>
<header>
<h1>画矩形</h1></header><canvas id=”canvas21″
width=”400″ height=”600″></canvas></section>
<section>
<header>
<h1>清除矩形</h1></header><canvas id=”canvas22″
width=”400″ height=”600″></canvas></section>

context.strokeStyle = ‘yellowgreen’; //画线的颜色
context.strokeRect(240, 120, 100, 100); //绘制 线矩形 位置
参数(x轴位置,Y轴位置,宽,高)

function draw2(id) {
var canvas = document.getElementById(id);
if(canvas == null) {
return false;
}
var context = canvas.getContext(‘2d’);
context.fillStyle = “#eeeff”;
context.fillRect(0, 0, 400, 300);
var n = 0;
var dx = 150;
var dy = 150;
var s = 100;
context.beginPath();
context.globalCompositeOperation = ‘and’;
context.fillStyle = “rgb(100,255,100)”;
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 15 * 11;
context.moveTo(dx, dy);
for(var i = 0; i < 30; i++) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.bezierCurveTo(dx + x * s, dy + y * s – 100, dx + x * s + 100,
dy + y * s, dx + x * s, dy + y * s);
}
context.closePath();
context.fill();
context.stroke();
}

context.fillStyle = ‘rgba(255,0,0,0.25)’;
context.fill();
context.strokeStyle = ‘rgba(255,0,0,0.25)’;
context.closePath();
context.stroke();

}*/
function draw3(id) {
var canvas = document.getElementById(id);
if(canvas == null)
return false;
var context = canvas.getContext(‘2d’);
var g1 = context.createLinearGradient(0, 0, 0, 300);
g1.addColorStop(0, ‘rgb(255,255,0)’); //浅绿
g1.addColorStop(1, ‘rgb(0,255,255)’); //浅蓝
context.fillStyle = g1;
context.fillRect(0, 0, 400, 300);

* */
function draw23(id) {
var canvas = document.getElementById(id);
if(canvas == null) {
return false;
}
var context = canvas.getContext(‘2d’);
var n = 0;
// 四分之一 圆弧
context.beginPath();
context.arc(100, 150, 50, 0, 0.5 * Math.PI, false);
context.fillStyle = ‘green’; //填充色
context.fill();
context.strokeStyle = ‘red’; //线
context.closePath();
context.stroke();

* */
//fill() 填充当前绘图(路径)
//stroke() 绘制已定义的路径
function draw1(id) {
var canvas = document.getElementById(id);
if(canvas == null) {
return false;
}
var context = canvas.getContext(‘2d’);
context.fillStyle = ‘#eeeeff’;
context.fillRect(0, 0, 400, 300);

context.restore(); //恢复到刚刚保存的状态,保存恢复 只能用1次
context.save(); //保存了
context.fillStyle = ‘purple’;
//平移 旋转 缩放 3 2 1
context.translate(300, 300);
context.rotate(Math.PI / 4);
context.scale(0.5, 0.5);
context.fillRect(0, 0, 100, 100);

context.restore(); //恢复到刚刚保存的状态,保存恢复 只能用1次
context.save(); //保存了
context.fillStyle = ‘blue’;
//平移 旋转 缩放 1 3 2
context.translate(100, 300);
context.rotate(Math.PI / 4);
context.scale(0.5, 0.5);
context.fillRect(0, 0, 100, 100);

//实验表明应该移动的是坐标轴
//实验表明缩放的是坐标轴比例
//实验表明旋转的是坐标轴
//综合上述,因此平移 缩放 旋转 三者的顺序不同都将画出不同的结果
}

context.strokeStyle = ‘blue’; //只是线
context.strokeRect(120, 120, 100, 100);