canvas学习笔记,CSS三入门连串

By admin in 4858美高梅 on 2019年4月11日

是因为网上海人民广播电视台湾大学都以用数不胜数算法和逻辑使用canvas举行绘图,但有时也无从消除壹部分小众须求

<!DOCTYPE html>
<html>

  canvas只协助1种基本造型——矩形,全数其余形状都以因而1个或多个途径组合而成,甚至是着力的矩形也足以经过路径组合成。
一、设置画笔属性   设想我们生活中画图的指南,大家率先是选用合适的水彩和笔,一样的道理,在canvas中画图同样也是依照需求,不断的去设置当前采纳的水彩和线条类型。
安装当前利用的颜料
  
canvas学习笔记,CSS三入门连串。任何封闭的图形都以有大约部分和填充部分组成。设置当前的颜色也是分两有的装置:

Web大前端时代之:HTML5+CSS三入门体系:

4858美高梅 1

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

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

大家先看看画布的吸引力:

   
为了满意必要不能够写运算纯手写,感觉真的很浪费时间,唯有和谐踩过的坑,才不想见见人家也被坑。小编很懒,也想过弄个工具,如今先放代码吧,方便供给的人copy。

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

  参数color能够是象征CSS颜色值的字符串,渐变对象可能图案对象。暗中同意情形下,线条和填充颜色都是石绿(CSS颜色值#000000)。
颜色的字符串表示   上边都以科学的值:

4858美高梅 2

    <canvas> H五标签,只是图形容器,您必须选取脚本来绘制图形。

stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo()
方法定义的路子。暗许颜色是深芙蓉红。

// 那些 fillStyle 的值均为 ‘象牙白’  
ctx.fillStyle = “orange”;  
ctx.fillStyle = “#FFA500”;  
ctx.fillStyle = “rgb(255,165,0)”;  
ctx.fillStyle = “rgba(255,165,0,1)”;  

 

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

//清除矩形 context.clearRect(0,0,360,360)
其实便是二个越来越大的矩形把其余的掩盖掉
*
* */
function draw21(id) {
var canvas = document.getElementById(id);
if(canvas == null) {
return false;
};
var context = canvas.getContext(‘2d’);

4858美高梅 3若是你要给每一个图形上不一样的水彩,你须要再一次安装
fillStyle或strokeStyle
的值,仿佛大家描绘时索要不停换分裂颜色的水彩1样。
设置光滑度 一.装置全局发光度:context.globalAlpha = transparency value。
  那本性情影响到 canvas 里全部图形的光滑度,有效的值范围是 0.0
(完全透明)到 一.0(完全不透明),暗许是 一.0。例子如下所示:

4858美高梅 4

    bezierCurveTo() 方法
 通过利用表示一遍贝塞尔曲线的钦命控制点,向当前路线添加多个点

//不安装fillstyle下的暗许fillstyle=black;
context.fillRect(0, 0, 100, 100);
//不安装strokeStyle下的暗中认可strokeStyle=black
context.strokeRect(120, 0, 100, 100);

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();  
  }  
}  

4858美高梅 5

    提醒:壹遍贝塞尔曲线须求四个点。前三个点是用于一遍贝塞尔计算中的控制点,第七个点是曲线的竣工 
 点。曲线的起来点是当前路线中最后3个点。借使路径不设有,那么请使用 beginPath() 和 moveTo() 方
    法来定义起始点。

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

二.装置单个图形的反射率

4858美高梅 6

 

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

  很简短,把rgba格式的字符串赋给fillStyle大概strokeStyle就足以了。
创设渐变色   canvas中大家也能够用线性可能径向的渐变来填充或描边。成立渐变色要通过上边多少个步骤:
一.创办渐变对象:

4858美高梅 7

证实:网上有尖端算法的绘图,很利索也很有利,若是或不是特命全权大使情形,千万别用自个儿的艺术,请上网右转看外人的案例,哈哈。

//设置发光度实践注脚折射率>0,<一值越低 越透明 值》=一时为纯色
值《=0时为完全透明
context.fillStyle = ‘rgba(255,0,0,0.2)’;
context.fillRect(0, 240, 100, 100);

  • 线性渐变:context.createLinearGradient(x一,y一,x二,y贰)
    办法接受5个参数,表示渐变的源点(x一,y1) 与终点(x二,y二)。
  • 向阳渐变:context.createRadialGradient(x一,y1,r一,x二,y二,r贰)
    措施接受两个参数,前多少个概念1个以(x壹,y1)为原点,半径为r一的圆,后多少个参数则定义另一个以(x二,y2)为原点,半径为r2的圆。

4858美高梅 8

 

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

  多少个办法重返响应的渐变对象,上面就足以给这一个指标添加渐变颜色了。

4858美高梅 9

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

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

二.给渐变对象上色:
  上色:gradientObject.addColorStop(position, color)
  方法接受1个参数,position 参数必须是2个 0.0 与 1.0
之间的数值,表示渐变中颜色所在的对立地点。例如,0.五表示颜色会现出在正中间;倘使第2个色标的该参数值不是0.0,则渐变会默许认为从起源到第二个色标之间都以蓝绿。

 

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

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

  color 参数必须是二个行之有效的 CSS 颜色值(如 #FFF,
rgba(0,0,0,1),等等)。
  能够依据须要加上任意八个色标(color
stops),也正是说渐变的情调数目是随机的。可是要专注保持色标定义顺序和它出色的相继一致,越发是当色标的职位重叠的时候。
三.把渐变对象赋给图形的fillStyle或strokeStyle属性。

先河画布

 

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

事例如下所示:

canvas暗中同意是宽300px,高150px;

  1. 雨伞

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);

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);  
}  

绘制步骤

<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.fillStyle = ‘red’; //全体填充 纯色
context.fillRect(0, 120, 100, 100);

创建图案填充效果 简短两步即解决。
1.创设图案pattern:context.createPattern(image,type)
  该措施接受多个参数。Image 能够是五个 Image 对象的引用,可能另一个canvas 对象。Type 必须是上边的字符串值之一:repeat,repeat-x,repeat-y
和 no-repeat。

1.定义一个id

 

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

2.pattern赋给fillStyle或strokeStyle属性。

<canvas id=”canvasOne” width=”300″ height=”300″></canvas>

  1. 飞机

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

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);  
  
  }  

2.获取canvas对象

<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>

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

开创阴影效果(近期谷歌 Chrome 16.0.91二.7伍依旧不协理的)
  首假设设置一下影子效果的连带属性值:

var canvasObj = document.getElementById(‘canvasOne’);

 

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

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

三.经过getContext获取上下文

  1. 五角星

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

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

var context = canvasObj.getContext(“2d”);

<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);

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);  
}  

近年来支撑二d制图

 

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

设置画笔的项目 画笔粗细:context.lineWidth = value
  那性情情设置当前绘线的粗细。属性值必须为正数。暗中同意值是壹.0。

4.通过javascript实行绘图

  1. 桃心

}
/*
画圆
context.beginPath() 开首一条路子,或重置当前路线
arc 创制弧/曲线(用于创制圆形或部分圆)
context.arc(x,y,r,sAngle,eAngle,counterclockwise)
(x,y,半径,开首角(以弧度总括 弧的圆形的叁点钟职分是 0
度),结束角(以弧度总计),可选,规定应当逆时针依然顺时针绘图。False =
顺时针,true = 逆时针。)
closePath 创制从此时此刻点回到开端点的路径

  线宽是指给定路径的基本到两边的粗细。换句话说正是在路线的两边各绘制线宽的二分一。因为画布的坐标并不和像素直接对应,当须要取得准确的档次或垂直线的时候要更加注意。
端点样式:context.lineCap = type
  属性 lineCap
的指决定了线段端点呈现的榜样。它能够为下边包车型客车二种的中间之1:butt,round
和 square。暗许是
butt。每一种设置完的效应如下图lineCap部分从左到右所示。
连接点样式:context.lineJoin = type
  lineJoin
的属性值决定了图片中两线段连接处所展现的样板。它可以是那二种之一:round,
bevel 和 miter。暗中认可是
miter。各个设置完的成效如下图lineJoin部分从上到下所示。
斜面连接限制:context.miterLimit = value
  当使用miter效果时,线段的外界边缘会延伸交汇于少数上。线段直接夹角相比较大的,交点不会太远,但当夹角减弱时,交点距离会呈指数级增大。那时能够用miterLimit属性设定外延交点与连接点的最大距离,假使交点距离当先此值,连接效果会化为了
bevel。

context.fillStyle =
“red”;

<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();
        }

* */
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();

 4858美高梅 10

安装样式为镉红

    </script>

//半圆
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();

事例如下:

context.fillRect(125,
125, 50, 50);

村办公众号(ZEROFC_DEV),关于web开发的,欢迎关切O(∩_∩)O~

//四分之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();

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();  
  }  
}  

在x坐标为1二5,y坐标为125的地点绘制一个长为50宽为50的长方形

4858美高梅 11

//整个园
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();

二、绘制简单矩形   矩形是唯1的焦点图形,canvas提供了一贯的API援助。

 

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

  • context.fillRect(x,y,width,height) : 绘制带填充色的矩形。
  • context.strokeRect(x,y,width,height) : 绘制矩形外框。
  • context.clearRect(x,y,width,height) :
    清空钦命的矩形区域,并安装该区域是晶莹的(Transparent)。
    它们都承受多个参数, x 和 y 钦定矩形左上角(绝对于原点)的岗位,width
    和 height 是矩形的宽和高。

制图案例

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

  除了那种办法,仍是能够运用绘图路径的艺术绘制矩形,这些参看路径绘图部分。

大规模几何

}

制图矩形的事例如下:

绘制直线

//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();

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

绘制300*300画布的对角线

* */
//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);

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

beginPath()

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();

3、路径绘图

初阶绘制

}

  cavas只提供了绘图矩形的API,其余的图片都以靠路径绘制。

moveTo(x,y)

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)’;
//实验证实第2遍lineTo的时候成效和moveTo一样
context.lineTo(十0, 拾0); //第二回的时候 点移动到了十0 100
//之后的lineTo会以上次lineTo的节点为起初
context.lineTo(200, 200); //从十0 拾0到200 200 画了一条线
context.lineTo(200, 十0); //又画到了200 拾0
context.moveTo(200, 50); //点移动到了200 50
context.lineTo(100, 50); //从200 50到拾0 50画了一条线
context.stroke();
}

绘图二个图纸首要的进程如下:
一.起动路径
主意:使用context.beginPath()运转路径绘图。
  在内部存款和储蓄器里,路径是以1组子路径(直线,弧线等)的款型储存的,它们壹起构成叁个图形。每一遍调用
beginPath,子路径组都会被重置,然后能够绘制新的图纸。
2.活动画笔到源点
艺术:使用moveTo(x, y)移动画笔。
  即使半数以上美术的时候,用不到那一个艺术。我们也不可能用这么些方式来画什么,不过你能够把它想象成是把笔提及,并从二个点运动到另2个点的进度。当你绘制不调换的门路的时候,你就会有其一动作了。
当 canvas 开首化可能调用 beginPath
的时候,开头坐标设置就是原点(0,0)。有时候,大家须求moveTo方法将胚胎坐标移至别的地方,用于绘制不延续的门道。
三.内部存款和储蓄器中绘制线段
画直线: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;
画3遍贝塞尔曲线:quadraticCurveTo(cp一x, cp一y, x, y)
画3遍贝塞尔曲线:bezierCurveTo(cp1x, cp一y, cp二x, cp2y, x, y)
  贝塞尔曲线
,它能够是1次和一遍方的样式,1般用来绘制复杂而有规律的形态。它们都有二个源点一个终极(下图中的蓝点),但二遍方贝塞尔曲线只有1个(紫罗兰色)控制点点)而2次方贝塞尔曲线有多个。
  参数x和y是终点坐标,cp一x和
cp1y是率先个控制点的坐标,cp二x和cp2y是第3个的。
  使用二回方和叁次方的贝塞尔曲线是卓绝有挑衅的,因为缺少直观性。理论上只要有耐心,再繁杂的图样都足以绘制出来的。

直线起源

/*
bezierCurveTo()
方法通过选取表示1回贝塞尔曲线的钦赐控制点,向当前路线添加一个点。
唤醒:二遍贝塞尔曲线必要多少个点。前多个点是用以1回贝塞尔总结中的控制点,第伍个点是曲线的甘休点。
曲线的发端点是时下路线中最后二个点。如果路径不设有,那么请使用
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>)

4858美高梅 12

lineTo(x,y)

quadraticCurveTo()
方法通过应用表示二遍贝塞尔曲线的钦定控制点,向当前路线添加贰个点。
晋升:三遍贝塞尔曲线须要多个点。第三个点是用以1遍贝塞尔总结中的控制点,第四个点是曲线的停止点。
曲线的开端点是当前路线中最终一个点。若是路径不设有,那么请使用
begin帕特h() 和 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();
}

 

直线终点

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();
}

 

stroke()

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);

 

绘制直线

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);

 

<canvas id=”canvasOne” width=”300″ height=”300″></canvas>

context.restore(); //复苏到刚刚保存的景况,保存复苏 只可以用二遍
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);

 

<script type=”text/javascript”>

context.restore(); //恢复生机到刚刚保存的事态,保存恢复 只好用三次
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);

 

var canvasObj =
document.getElementById(‘canvasOne’);

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);

 

var context =
canvasObj.getContext(“2d”);

context.restore(); //苏醒到刚刚保存的景色,保存恢复 只好用二回
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);

绘图矩形路径:context.rect(x, y, width, height)
  当rect方法被调用时,moveTo方法会自动被调用,参数为(0,0),于是早先坐标又过来成初叶原点了。
四.闭馆路径
艺术:使用context.closePath()关闭路径。

//context.strokeStyle =
“#ff6a00”;

context.restore(); //恢复生机到刚刚保存的意况,保存复苏 只可以用一遍
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);

  该措施它会尝试用直线连接当前端点与起初端点来关闭路径,但假若图形已经关闭或许唯有一个点,它会如何都不做,这一步在1些情况并不是必须的,比如利用fill()绘制实际图形的时候,就不必要先调用closePath。
5.绘制路径到canvas
画图纸边框:context.stroke()
填充实心图形:context.fill()

context.beginPath();

//实验表明应该移动的是坐标轴
//实验注解缩放的是坐标轴比例
//实验申明旋转的是坐标轴
//综合上述,因而活动 缩放 旋转 三者的相继不一样都将画出不一致的结果
}

末尾这一步是调用 stroke或 fill方法,那时,图形才是实在的绘图到 canvas
上去。

context.moveTo(0,
0);

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)’;

4858美高梅 13调用stroke在此以前务须求先调用关闭路径方法closePath。而调用fill此前不要求调用closePath关闭路径,调用fill时路径会自动关闭。

context.lineTo(300,
300);

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);
}
}

一个错综复杂的事例如下:

context.stroke();

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

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);

 

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.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();
}

context.moveTo(0,
300);

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();
}

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.lineTo(300,
0);

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);

结果如下:

context.stroke();

}

4858美高梅 14

</script>

var x = 100; //矩形开头坐标
var y = 十0; //矩形甘休坐标
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高度

 

绘图矩形

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;
}
}

实用参考: 法定参考文书档案以及API详细表达:


在画布中间绘制三个十0*50的矩形

}
//createLinearGradient() 创制线性渐变(用在画布内容上)
定义从黑到白的渐变(从左向右),作为矩形的填充样式:
//八个参数 context.createLinearGradient(x0,y0,x一,y一);
/*x0 渐变开头点的 x 坐标
y0 渐变起始点的 y 坐标
x一 渐变停止点的 x 坐标
y一 渐变甘休点的 y 坐标*/

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

绘制

/*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);

 

strokeStyle

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


strokeRect(x,y,w,h)

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

填充

}
/* 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);

fillStyle

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();
}

fillRect(x,y,w,h)

}*/
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);


<canvas id=”canvasOne” width=”300″ height=”300″></canvas>

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();
}
}

<script type=”text/javascript”>

function draw26(id) {

var
canvasObj = document.getElementById(‘canvasOne’);

//同一圆心画球形
/*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();*/

var context =
canvasObj.getContext(“2d”);

//不一样圆心看径向渐变模型
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);
}

context.strokeStyle = ‘rgb(100%,0%,100%)’;

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)’);

context.strokeRect(100, 125, 100, 50);

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

</script>

/* 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)’;

绘图圆形

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

绘制300*300画布的内切圆

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);

beginPath()

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”;在画布上写1段 40 像素的公文,使用的书体是
“Arial”

开始绘制路径

textBaseline 设置或回到在绘制文本时行使的如今文件基线
阿尔法betic 暗许。文本基线是常见的假名基线。
top 文本基线是 em 方框的上方。。
hanging 文本基线是悬挂基线。
middle 文本基线是 em 方框的正中。
ideographic 文本基线是企图基线。
bottom 文本基线是 em 方框的底端。

arc(x, y, r, s, e,
b)

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);
}


x,y 坐标此次是象征圆心

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>

r
代表半径

<body>
<section>
<header>
<h1>画矩形</h1></header><canvas id=”canvas21″
width=”400″ height=”600″></canvas></section>
<section>
<header>
<h壹>清除矩形</h一></header><canvas id=”canvas2二”
width=”400″ height=”600″></canvas></section>

s
代表开端弧度

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

e
代表甘休弧度

<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>

b
代表是不是逆时针方向画图

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

暗中同意顺时针

<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>

closePath()

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

终结绘制路径

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

推而广之案例

<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>

fill()

<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>

填充

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


<canvas id=”canvasOne” width=”300″ height=”300″></canvas>

<section><header><h1>绘制文字fillText
strokeText</h一></header><canvas id=”canvas17″ width=”400″
height=”300″></canvas></section>
<section><header><h1>绘图状态的保存save与还原restore</h一></header><canvas
id=”canvas18″ width=”400″
height=”300″></canvas></section>
<section><header><h1>保存文件canvas.toDataU本田UR-VL</h一></header><canvas
id=”canvas1九” width=”400″
height=”300″></canvas></section>
</body>

<script type=”text/javascript”>

</html>

var
canvasObj = document.getElementById(‘canvasOne’);

var context = canvasObj.getContext(“2d”);

context.fillStyle = ‘rgb(0,50,0)’;

context.beginPath();//伊始绘制路径

context.arc(150, 150, 150, 0, Math.PI * 二,true);//注意:x,y
坐标此番是意味着圆心

context.closePath();//结束绘制路径

context.fill();//填充

</script>

绘制弧线

context.closePath();

途径不闭合的时候会自行画一条直线(代码看注释)

<canvas id=”canvasOne” width=”300″
height=”300″></canvas>

<canvas id=”canvasTwo” width=”300″ height=”300″></canvas>

<canvas id=”canvasThree” width=”300″ height=”300″></canvas>

<script type=”text/javascript”>

//第三个画布

var
canvasObj = document.getElementById(‘canvasOne’);

var
context = canvasObj.getContext(“2d”);

for
(var i = 0; i <= 15; i++)
{


context.strokeStyle= ‘rgb(0,50,0)’;

context.beginPath();//开端绘制路径

context.arc(0, 150, i * 10, 0, Math.PI * 壹.伍);//注意:x,y
坐标这一次是意味圆心

//context.closePath();//甘休绘制路径

context.stroke();//填充

}

//第二个画布

var canvasObj2
= document.getElementById(‘canvasTwo’);

var
context2 = canvasObj2.getContext(“2d”);

for
(var i = 0; i <= 30; i++)
{


context2.strokeStyle= ‘rgb(0,0,50)’;

context二.beginPath();//伊始绘制路径

context2.arc(0, 0, i * 10, 0, Math.PI * 一.5);//注意:x,y
坐标此次是意味圆心

//context二.closePath();//截至绘制路径

context2.stroke();//填充

}

//第四个画布-搞怪来袭

var canvasObj3
= document.getElementById(‘canvasThree’);

var
context3 = canvasObj3.getContext(“2d”);

for
(var i = 0; i <= 30; i++)
{


context3.strokeStyle= ‘rgb(0,0,50)’;

context3.beginPath();//起始绘制路径

context3.arc(0, 150, i * 十, 壹, 三);//注意:x,y 坐标本次是意味圆心

context三.close帕特h();//甘休绘制路径,路径不闭合的情景下会活动补上3个直线,所以就搞怪了

context3.stroke();//填充

}

</script>

绘图三角形

制图三角形

<canvas id=”myCanvas” width=”200″ height=”200″></canvas>

<script type=”text/javascript”>

var c = document.getElementById(“myCanvas”);

var context = c.getContext(“2d”);

context.strokeStyle =
“red”;

context.beginPath();

context.moveTo(25, 25);

context.lineTo(150,
25);

context.lineTo(25,
150);

context.closePath();

context.stroke();

</script>

常用技能

透 明 度

rgba(r,g,b,a)

a代表折射率,取值范围在 0~1

清 除 画 布

context.clearRect(x,y,w,h)

(圆形橡皮擦)

案例

保存与还原情形

状态

指当前画面全数样式,变形,裁切的快速照相

举个例证:你先用深稻草黄样式画二个矩形,然后保留景况,然后再用中湖蓝样式画一个矩形。

还原状态画个矩形看看,发现====>
矩形是新民主主义革命的====>表明====>状态保存下去了。

图例

保存

context.save();

恢复

context.restore()

移动坐标空间

context.translate(60,50);

x轴方向右移60,y轴方向下移50

for
(var i = 1; i < 10; i++) {

context.save();//保存一下景色

 

context.translate(60 * i, 50);//x轴方向右移60*i,y轴方向下移50

 

//画伞的顶部

* context.fillStyle = ‘rgb(‘ + i \ 25 + ‘,’ + 0 + ‘,’ + 255

  • ‘)’; **

    context.beginPath();

    context.arc(0, 0,
    30, 0,
    Math.PI,
    true);//在起源地方顺时针画三个半圆

context.closePath();

context.fill();

4858美高梅 , 

//画伞的最底层

context.strokeStyle = “red”;

context.strokeRect(-0.2, 0, 0.4, 30);

//画伞的根部

context.beginPath();

context.arc(-五, 30,
五, 0, Math.PI);//圆心左移四个单位,圆的左侧点就在根部了

context.stroke();

 

context.restore();//苏醒一下意况(不然老是都活动坐标原点,就成为天女散花了)

}

for (var i = 1; i
< 10; i++) {

//x轴方向右移60+i,y轴方向下移50

**context.translate(60

  • i, 50);**

 

//画伞的顶部

context.fillStyle =
‘rgb(‘ + 255 + ‘,’ + i * 25 + ‘,’ + 0 + ‘)’;

context.beginPath();

context.arc(0, 0,
30, 0, Math.PI, true);//在起源位置顺时针画三个半圆

context.closePath();

context.fill();

 

//画伞的平底

context.strokeStyle = “red”;

context.strokeRect(-0.2, 0, 0.4, 30);

//画伞的根部

context.beginPath();

context.arc(-伍, 30, 五, 0,
Math.PI);//圆心左移五个单位,圆的左侧点就在根部了

context.stroke();

}

旋转坐标空间

rotate(angle)

angle 代表旋转角度

弧度为单位

在坐标原点顺时针方向旋转

<canvas
id=”canvasOne” width=”600″ height=”600″></canvas>

<script
type=”text/javascript”>

var canvasObj =
document.getElementById(‘canvasOne’);

var context =
canvasObj.getContext(‘2d’);

context.translate(300, 300);

 

//画伞

function drawUmbrella(i) {

//画伞的顶部

context.fillStyle = ‘rgb(‘ + i * 25 + ‘,’ + 0 + ‘,’ + 255 + ‘)’;

context.beginPath();

context.arc(0, 0, 30, 0, Math.PI, true);//在起点地点顺时针画一个半圆


context.closePath();

context.fill();

//画伞的最底层

context.strokeStyle = “red”;

context.strokeRect(-0.2, 0, 0.4, 30);

//画伞的根部

context.beginPath();

context.arc(-伍, 30, 伍, 0,
Math.PI);//圆心左移五个单位,圆的左边点就在根部了

context.stroke();

}

 

function draw() {

for
(var i = 1; i <= 10; i++) {

context.save();//保存一下场所

context.rotate(Math.PI * (0.2 * i));//贰Pi 弧度是三个圆

context.translate(0, 150);//越小越紧密

drawUmbrella(i);//画伞(画伞代码未变)

context.restore();//苏醒一下场所

}

}

 

window.onload
= function () {

draw();

}

</script>


放 图 形

context.scale(1.1, 1.1)

扩大1.1倍

rgba(r,g,b,a)

a代表折射率,取值范围在 0~1

<canvas id=”canvasOne” width=”600″
height=”600″></canvas>

<script
type=”text/javascript”>

var
canvasObj = document.getElementById(‘canvasOne’);

var context = canvasObj.getContext(‘2d’);

context.translate(300, 300);

for (var i = 1; i < 50; i++) {

context.rotate(Math.PI /
9);//旋转

context.scale(1.1, 1.1);//扩大1.1倍

context.translate(0.5, 0.5);//平移

 

* context.fillStyle = ‘rgba(‘ + i \ 5 + ‘,’ + 0 +
‘,’ + 200 + ‘,’

  • 0.5 + ‘)’; **

    context.beginPath();

    context.arc(0, 0, 1,
    0, Math.PI * 2,
    true);

    context.closePath();

    context.fill();

    }

</script>

矩 阵 变 化

实质上像
translate(移动),scale(缩放),rotate(旋转)都以特殊的矩阵变换

transform(m11,m12,m21,m22,dx,dy)

轮换当前的转换矩阵(transform()
允许你缩放、旋转、移动并倾斜当前的条件)

参数图解

真老公式

参数详解

水平缩放绘图

m11

水平倾斜绘图

m12

笔直倾斜绘图

m21

笔直缩放绘图

m22

水平位移绘图

dx

垂直运动绘图

dy

setTransform(m11,m12,m21,m22,dx,dy)

重置并创立新的转移矩阵

小案例

 

<canvas
id=”canvasOne” width=”600″ height=”600″></canvas>

<script
type=”text/javascript”>

var canvasObj =
document.getElementById(‘canvasOne’);

var context = canvasObj.getContext(‘2d’);

context.translate(200, 20);

for (var i = 1; i < 90; i++) {

context.save();

//参数:水平缩放绘图,水平倾斜绘图,垂直倾斜绘图,垂直缩放绘图,水平位移绘图,垂直运动绘图

context.transform(0.95,
0, 0, 0.95, 30, 30);

context.rotate(Math.PI
/ 1二);//旋转角度

context.beginPath();

context.fillStyle =
“rgba(255,0,0,0.5)”;

context.arc(0, 0,
50, 0, Math.PI * 2, true);

context.closePath();

context.fill();

}

//参数:水平缩放绘图,水平倾斜绘图,垂直倾斜绘图,垂直缩放绘图,水平位移绘图,垂直运动绘图

context.setTransform(1, 0, 0, 1, 10, 10);

//检验一下是还是不是变动过来了

context.fillStyle =
“blue”;

context.fillRect(0, 0, 50, 50);

context.fill();

</script>

扩 展 样 式

线形属性

lineWidth

设置线条粗细暗中同意为一,为正数

<canvas
id=”canvasOne” width=”300″ height=”300″></canvas>

<script
type=”text/javascript”>

var canvasObj =
document.getElementById(‘canvasOne’);

var context =
canvasObj.getContext(‘2d’);

for (var i = 1; i < 12; i++)
{

context.strokeStyle = ‘rgb(255,0,0)’;

context.lineWidth = i;

context.beginPath();

context.moveTo(i *
20, 0);

context.lineTo(i * 20, 300);

//context.closePath();

context.stroke();

}

</script>

lineCap

设置端点样式

butt

平头

默认

round

圆头

square

方头

<canvas
id=”canvasOne” width=”300″ height=”300″></canvas>

<script
type=”text/javascript”>

var canvasObj =
document.getElementById(‘canvasOne’);

var context =
canvasObj.getContext(‘2d’);

//定义数组

var lineCap = [‘butt’, ’round’, ‘square’];

// 绘制参考线。

context.strokeStyle =
‘red’;

context.beginPath();

context.moveTo(10,10);

context.lineTo(10,150);

context.moveTo(150,10);

context.lineTo(150,150);

context.stroke();

// 绘制直线段。

context.strokeStyle = ‘blue’;

for (var i = 0; i
< lineCap.length; i++) {

context.lineWidth =
20;

context.lineCap =
lineCap[i];

context.beginPath();

context.moveTo(10, 30 +
i * 50);

context.lineTo(150, 30 + i * 50);

context.stroke();

}

</script>

lineJoin

设置连接处样式

round

bevel

斜面

miter

默认

<canvas
id=”canvasOne” width=”500″ height=”200″></canvas>

<script
type=”text/javascript”>

var canvasObj =
document.getElementById(‘canvasOne’);

var context =
canvasObj.getContext(‘2d’);

var lineJoin =
[’round’, ‘bevel’, ‘miter’];

context.strokeStyle = ‘rgb(0,0,0)’;

for (var i = 0; i <
lineJoin.length; i++) {

context.lineWidth =
25;

context.lineJoin = lineJoin[i];

context.beginPath();

context.moveTo(10 + i * 150, 30);

context.lineTo(100 + i *
150, 30);

context.lineTo(100 + i * 150, 100);

context.stroke();

}

</script>

miterLimit

设置或回到最大斜接长度

前提

lineJoin使用暗中认可属性(miter)

<canvas
id=”canvasOne” width=”1600″ height=”300″></canvas>

<script
type=”text/javascript”>

var context =
document.getElementById(‘canvasOne’).getContext(‘2d’);

for (var i = 1; i
< 10; i++) {

context.strokeStyle
= ‘blue’;

context.lineWidth = 10;

context.lineJoin = ‘miter’;

context.miterLimit = i * 10;

context.beginPath();

context.moveTo(10, i
* 30);

context.lineTo(100, i * 30);

context.lineTo(10, 33 * i);

context.stroke();

}

</script>

渐 变 系 列

线形渐变

createLinearGradient(x0, y0, x1, y1)

请使用该指标作为
strokeStyle 或 fillStyle 属性的值

x0,y0

渐变起源

x1,y1

渐变终端

addColorStop(position, color);

相似都以安装五个色标

position

色相偏移值

取值 0~1

color

颜色

毫无一定从0发轫,1实现

 

<canvas
id=”canvasOne” width=”300″ height=”300″></canvas>

<script
type=”text/javascript”>

var context =
document.getElementById(‘canvasOne’).getContext(‘2d’);

var lingrad =
context.createLinearGradient(0, 0, 0, 200);

lingrad.addColorStop(0, ‘#ff0000’);

lingrad.addColorStop(1 / 7, ‘#ff9900’);

lingrad.addColorStop(2 / 7,
‘#ffff00’);

lingrad.addColorStop(3 / 7, ‘#00ff00’);

lingrad.addColorStop(4 / 7, ‘#00ffff’);

lingrad.addColorStop(5 / 7, ‘#0000ff’);

lingrad.addColorStop(6 / 7, ‘#ff00ff’);

lingrad.addColorStop(1, ‘#ff0000’);

context.fillStyle =
lingrad;

context.fillRect(10, 10, 200, 200);

</script>

var c =
document.getElementById(‘myCanvas’);

var ctx =
c.getContext(‘2d’);

var grd =
ctx.createLinearGradient(0, 0, 170, 0);

grd.addColorStop(0.1,
‘rgb(255,255,255)’);

grd.addColorStop(0.5,
‘rgb(0,100,0)’);

grd.addColorStop(0.9,
‘rgb(0,0,0)’);

ctx.fillStyle =
grd;

ctx.fillRect(20, 20, 150, 100);

通往渐变

createRadialGradient(x1,y1,r1,x2,y2,r2)

以(x一,y一)为原点,r1为半径的圆

以(x贰,y二)为原点,r二为半径的圆

addColorStop(position, color);

相似都以设置多少个色标

position

色相偏移值

取值 0~1

color

颜色

不要必然从0发轫,1终了

 

<canvas id=”myCanvas” width=”300″ height=”240″></canvas>

<script
language=”javascript”>

var
ctx = document.getElementById(‘myCanvas’).getContext(‘2d’);

var
radgrad = ctx.createRadialGradient(55, 55, 20, 100, 100, 90);

radgrad.addColorStop(0, ‘rgb(255,255,0)’);

radgrad.addColorStop(0.75, ‘rgb(255,0,0)’);

radgrad.addColorStop(1,
‘rgb(255,255,255)’);

ctx.fillStyle =
radgrad;

ctx.fillRect(10,
10, 200,
200);

</script>

创 建 阴 影

参数

shadowOffsetX

shadowOffsetX
属性设置或回到形状与阴影的水准距离

shadowOffsetX=0
提示阴影位于形状的正下方。

shadowOffsetX=20
提醒阴影位于形状 left 地点右手的 20 像素处。

shadowOffsetX=-20
提醒阴影位于形状 left 地点左边的 20 像素处。

shadowOffsetY

shadowOffsetY
属性设置或重回形状与影子的垂直距离。

shadowOffsetY=0
提示阴影位于形状的正下方。

shadowOffsetY=20
指示阴影位于形状 top 地方下方的 20 像素处。

shadowOffsetY=-20
提醒阴影位于形状 top 地点上方的 20 像素处。

shadowBlur

shadowBlur
属性设置或回到阴影的模糊级数。

shadowColor

shadowColor
属性设置或回到用于阴影的颜色

<canvas
id=”canvasOne” width=”600″ height=”600″></canvas>

<script
type=”text/javascript”>

var canvasObj =
document.getElementById(‘canvasOne’);

var context =
canvasObj.getContext(‘2d’);

 

//设置前画个图

context.fillStyle =
‘#0094ff’;

context.fillRect(410, 310, 50, 50);

 

//设置阴影

context.shadowOffsetX = 3;

context.shadowOffsetY = 3;

context.shadowBlur = 1;

context.shadowColor
= ‘#808080’;

 

//画矩形

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

 

//绘图

var img = new Image();

img.src =
‘.jpg’;

img.onload =
function () {

context.fillStyle = context.createPattern(img,
‘no-repeat’);

context.fillRect(0,
0, 600, 600);

}

</script>

制图像和文字字

绘图填充文字

fillText(str,x,y,[mw])

str

文字内容

x,y

源点坐标

mw

最大开间

可选参数

绘制文字概况

strokeText(str,x,y,[mw])

str

文字内容

x,y

起点坐标

mw

最大幅面

可选参数

度量文字宽度

measureText(str)

context.measureText(str).width

文字宽度

str

文字内容

文字类别属性

context.font

语法

context.font=”italic small-caps bold 12px arial”;

font-style

明确字体样式。也许的值:

normal

italic

斜体字

oblique

倾斜

font-variant

分明字体变体。可能的值:

normal

small-caps

大写

font-weight

明确字体的粗细。只怕的值:

normal

bold

bolder

lighter

100

font-family

明确字体系列。

font-size /
line-height

分明字号和行高,以像素计。

icon

应用用于标记图标的书体。

menu

运用用于菜单中的字体(下拉列表和菜单列表)。

caption

选取标题控件的书体(比如按钮、下拉列表等)。

status-bar

利用用于窗口状态栏中的字体。

message-box

行使用于对话框中的字体。

small-caption

选拔用于标记小型控件的书体。

案例

<canvas
id=”canvasOne” width=”500″ height=”300″></canvas>

<script
type=”text/javascript”>

var canvasObj =
document.getElementById(‘canvasOne’);

var context =
canvasObj.getContext(‘2d’);

var str =
”;

context.fillStyle
= ‘rgba(255,0,0,0.9)’;

context.strokeStyle = ‘rgba(255,0,0,0.9)’;

 

context.font = ’30px 微软雅黑’;

context.strokeText(str, 100, 40);

console.log(context.measureText(str).width);

context.fillText(str, 100, 80);

console.log(context.measureText(str).width);

 

context.font = ‘bold 30px 微软雅黑’;

context.strokeText(str, 100, 150);

console.log(context.measureText(str).width);

context.fillText(str, 100, 180);

console.log(context.measureText(str).width);

</script>

图像种类

一.图像来源

路线图片

直接对 src 赋值

var
img=new Image();

img.src=’xxx’;

页面图片

来源页面,若是已知id则可经过

document.images 集合

document.getElementsByTagName

document.getElementsById

其他canvas元素

document.getElementsByTagName

document.getElementsById

2.drawImage绘图

context.drawImage(img,x,y)

在画布上稳定图像

img
规定要利用的图像、画布或摄像。

x
在画布上停放图像的 x 坐标地点。

y
在画布上放置图像的 y 坐标地点。

//获取路径图片

document.getElementById(‘btn1’).onclick
= function () {

clearCanvas(context);

var
img1 = new Image();

img1.src = ‘.jpg’;

context.drawImage(img1, 150, 150);

}

context.drawImage(img,x,y,w,h)

在画布上固定图像,并规定图像的宽度和惊人

img
规定要运用的图像、画布或录制。

x
在画布上停放图像的 x 坐标地方。

y
在画布上放置图像的 y 坐标地方。

w
要采用的图像的幅度。(伸展或减弱图像)

h
要运用的图像的可观。(伸展或收缩图像)

//获取页面图片

document.getElementById(‘btn2’).onclick
= function () {

clearCanvas(context);

var
img2 = document.getElementById(‘imgOne’);

context.drawImage(img2, 150, 150, 200, 200);

}

context.drawImage(img,sx,sy,sw,sh,x,y,w,h)

细分图像,并在画布上固定被分开的部分

img
规定要采用的图像、画布或录像。

sx
起初剪切的 x 坐标位置。

sy
初步剪切的 y 坐标地方。

sw
被剪切图像的大幅度。

sh
被划分图像的惊人。

x
在画布上停放图像的 x 坐标地方。

y
在画布上停放图像的 y 坐标地点。

w
要运用的图像的小幅。(伸展或减弱图像)

h
要使用的图像的中度。(伸展或减弱图像)

//从Canvas获取

document.getElementById(‘btn3’).onclick
= function () {

clearCanvas(context);

var
img3 = document.getElementById(‘canvasTwo’);

context.drawImage(img3, 150, 150, 300, 250, 50, 50, 400, 300);

}

扩展(不完美)

createPattern(image,type)

image

分明要运用的图样、画布或视频成分

var
img=new Image();

type

是还是不是重发

repeat|repeat-x|repeat-y|no-repeat

<canvas id=”canvasOne” width=”600″
height=”600″></canvas>

<script
type=”text/javascript”>

var
canvasObj = document.getElementById(‘canvasOne’);

var
context = canvasObj.getContext(‘2d’);

var
img = new Image();

img.src = ‘.jpg’;

img.onload = function () {

context.fillStyle = context.createPattern(img,
‘repeat’);

context.fillRect(0, 0, 600, 600);

}

</script>

注意:

context.fillRect(100, 0, 600, 600);

那里的fillRect(x,y,w,h)。x,y既指的是坐标原点,也指的是图片原点

壮当先5分之3

绘图贝塞尔曲线

3回方贝塞尔曲线

quadraticCurveTo(cp1x,cp1y,x,y)

cp一x,cp一y是决定点坐标

x,y是极端坐标

<canvas
id=”myCanvas” style=”border:1px solid;” width=”300″
height=”200″></canvas>

<script
type=”text/javascript”>

var
c=document.getElementById(“myCanvas”);

var
context=c.getContext(“2d”);

//
下边起始绘制二次方贝塞尔曲线。

context.strokeStyle=”dark”;

context.beginPath();

context.moveTo(0,200);

context.quadraticCurveTo(75,50,300,200);

context.stroke();

context.globalCompositeOperation=”source-over”;

// 上面绘制的直线用于表示上面曲线的控制点和控制线,控制点坐标即两直线的交点(75,50)。

context.strokeStyle=”#ff00ff”;

context.beginPath();

context.moveTo(75,50);

context.lineTo(0,200);

context.moveTo(75,50);

context.lineTo(300,200);

context.stroke();

</script>

3次方贝塞尔曲线

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

cp一x,cp一y是决定点坐标

cp贰x,cp2y是第三个控制点坐标

x,y是极端坐标

<canvas
id=”myCanvas” width=”300″ height=”200″></canvas>

<script
type=”text/javascript”>

var
c=document.getElementById(“myCanvas”);

var
context=c.getContext(“2d”);

//
上边起先绘制2次方贝塞尔曲线。

context.strokeStyle=”dark”;

context.beginPath();

context.moveTo(0,200);

context.bezierCurveTo(25,50,75,50,300,200);

context.stroke();

context.globalCompositeOperation=”source-over”;

// 上边绘制的直线用于表示上面曲线的控制点和控制线,控制点坐标为(二五,50)和(7五,50)。

context.strokeStyle=”#ff00ff”;

context.beginPath();

context.moveTo(25,50);

context.lineTo(0,200);

context.moveTo(75,50);

context.lineTo(300,200);

context.stroke();

</script>

结缘裁切

组合

globalCompositeOperation

安装或重返怎样将一个源(新的)图像绘制到指标(已有)的图像上

裁切

clip()

从原始画布中剪切任意形状和尺寸

案例

从画布中剪切
200*120
像素的矩形区域。然后,绘制本白矩形。只有被细分区域内的金黄矩形部分是可知的

<p>不使用
clip():</p>

<canvas
id=”myCanvas” width=”300″ height=”150″ style=”border:1px solid
#d3d3d3;”></canvas>

<script>

var c =
document.getElementById(“myCanvas”);

var ctx =
c.getContext(“2d”);

ctx.rect(50, 20,
200, 120);

ctx.stroke();

ctx.fillStyle =
“green”;

ctx.fillRect(0, 0,
150, 100);

</script>

<br />

<p>使用
clip():</p>

<canvas
id=”myCanvas2″ width=”300″ height=”150″ style=”border:1px solid #d3d3d3;”></canvas>

<script>

var c = document.getElementById(“myCanvas2”);

var ctx = c.getContext(“2d”);

// Clip a rectangular
area

ctx.rect(50, 20, 200, 120);

ctx.stroke();

ctx.clip();

// Draw red
rectangle after clip()

ctx.fillStyle =
“green”;

ctx.fillRect(0, 0, 150, 100);

</script>

案例2

<canvas
id=”myCanvas” style=”border:1px solid;” width=”300″
height=”300″></canvas>

<script
type=”text/javascript”>

function draw() {

var ctx =
document.getElementById(‘myCanvas’).getContext(“2d”);

// 绘制背景。

ctx.fillStyle =
“black”;

ctx.fillRect(0, 0,
300, 300);

ctx.fill();

// 绘制圆形。

ctx.beginPath();

ctx.arc(150, 150,
130, 0, Math.PI * 2, true);

// 裁切路径。

ctx.clip();

ctx.translate(200,
20);

for (var i = 1; i < 90; i++) {

ctx.save();

ctx.transform(0.95, 0, 0,
0.95, 30, 30);

ctx.rotate(Math.PI / 12);

ctx.beginPath();

ctx.fillStyle = “red”;

ctx.globalAlpha =
“0.4”;

ctx.arc(0, 0, 50, 0,
Math.PI * 2, true);

ctx.closePath();

ctx.fill();

}

}

window.onload =
function () {

draw();

}

</script>

 4858美高梅 15

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有