新浦京81707con > 注册购买 > Canvas绘制图形,canvas学习笔记

原标题:Canvas绘制图形,canvas学习笔记

浏览次数:68 时间:2019-05-03

由于英特网海人民广播电视台湾大学都是用繁多算法和逻辑使用canvas实行绘图,但奇迹也不可能减轻一些小众必要

<!DOCTYPE html>
<html>

  canvas只支持一种基本造型——矩形,全部其余形状都是经过1个或多个渠道组合而成,乃至是中央的矩形也能够透过路线组合成。
壹、设置画笔属性   设想大家生活中画图的典范,我们第二是选项合适的颜料和笔,同样的道理,在canvas中画图同样也是依赖须要,不断的去设置当前选取的水彩和线条类型。
安装当前利用的颜料   其余封闭的图纸都是有差不离部分和填充部分构成。设置当前的颜色也是分两有的设置:

图片 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)。
颜色的字符串表示   上面都以合情合理的值:

    <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() 方法 增多2个新点,然后创制从该点到画布中最终内定点的线条

//清除矩形 context.clearRect(0,0,360,360) 其实便是3个更加大的矩形把任何的掩盖掉
*
* */
function draw21(id) {
var canvas = document.getElementById(id);
if(canvas == null) {
return false;
};
var context = canvas.getContext('2d');

图片 2假定您要给各样图形上分化的水彩,你要求再度安装 fillStyle或strokeStyle 的值,就好像大家描绘时索要不停换不一致颜色的水彩同样。
安装光滑度 壹.安装全局反射率:context.globalAlpha = transparency value。
  那个特性影响到 canvas 里全数图形的反射率,有效的值范围是 0.0 (完全透明)到 一.0(完全不透明),私下认可是 一.0。例子如下所示:

    bezierCurveTo() 方法  通过应用表示3回贝塞尔曲线的钦点调节点,向当前路线增添三个点

//不设置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();  
  }  
}  

    提醒:三遍贝塞尔曲线须求四个点。前七个点是用来二遍贝塞尔总计中的控制点,首个点是曲线的利落    点。曲线的上马点是时下路径中最后2个点。假设路线不设有,那么请使用 beginPath() 和 moveTo() 方     法来定义起头点。

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

2.设置单个图形的光滑度

 

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

  很简短,把rgba格式的字符串赋给fillStyle可能strokeStyle就能够了。
创制渐变色   canvas中我们也得以用线性也许径向的渐变来填充或描边。成立渐变色要透过下边多少个步骤:
1.开立渐变对象:

表达:英特网有高等算法的绘图,很灵活也很便宜,假使不是特命全权大使景况,千万别用本身的章程,请上网右转看外人的案例,哈哈。

//设置光滑度实践评释发光度>0,<壹值越低 越透明 值》=壹时为纯色 值《=0时为完全透明
context.fillStyle = 'rgba(255,0,0,0.2)';
context.fillRect(0, 240, 100, 100);

  • 线性渐变:context.createLinearGradient(x一,y壹,x二,y贰)
    艺术接受伍个参数,表示渐变的源点(x一,y一) 与极端(x贰,y二)。
  • 向阳渐变:context.createRadialGradient(x一,y1,r一,x2,y二,r贰)
    办法接受陆个参数,前四个概念三个以(x一,y1)为原点,半径为r一的圆,后三个参数则定义另2个以(x二,y贰)为原点,半径为r二的圆。

 

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

  多少个格局重回响应的渐变对象,上面就足以给这么些目标增多渐变颜色了。

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

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

2.给渐变对象上色:
  上色:gradientObject.addColorStop(position, color)
  方法接受三个参数,position 参数必须是三个 0.0 与 1.0 之间的数值,表示渐变中颜色所在的相对地方。比方,0.伍表示颜色会油不过生在正中间;假使第二个色标的该参数值不是0.0,则渐变会暗中同意感觉从源点到第3个色标之间皆以黑古铜色。

<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 参数必须是2个得力的 CSS 颜色值(如 #FFF, rgba(0,0,0,1),等等)。
  可以依附必要增添大4多个色标(color stops),也正是说渐变的情调数目是任性的。不过要留意保持色标定义顺序和它可以的逐1一致,特别是当色标的职位重叠的时候。
3.把渐变对象赋给图形的fillStyle或strokeStyle属性。

 

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

事举例下所示:

  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 能够是3个 Image 对象的引用,大概另3个canvas 对象。Type 必须是下边包车型客车字符串值之1:repeat,repeat-x,repeat-y 和 no-repeat。

 

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

2.pattern赋给fillStyle或strokeStyle属性。

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

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

创制阴影效果(近来谷歌(Google) Chrome 16.0.91二.75照旧不援助的)
  主若是安装一下投影效果的有关属性值:

 

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

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

  1. 五角星

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

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

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

 

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

安装画笔的类型 画笔粗细:context.lineWidth = value
  这么些性情设置当前绘线的粗细。属性值必须为正数。暗中认可值是1.0。

  1. 桃心

}
/*
画圆
context.beginPath() 开首一条路线,或重新初始化当前路径
arc 创立弧/曲线(用于创建圆形或一些圆)
context.arc(x,y,r,sAngle,eAngle,counterclockwise)
(x,y,半径,开头角(以弧度总结 弧的圈子的三点钟地方是 0 度),甘休角(以弧度总计),可选,规定相应逆时针照旧顺时针绘图。False = 顺时针,true = 逆时针。)
closePath 创造从此时此刻点回到初步点的门径

  线宽是指给定路径的主导到两边的粗细。换句话说正是在路径的两边各绘制线宽的4分之3。因为画布的坐标并不和像素直接对应,当须求取得正确的等级次序或垂直线的时候要尤其注意。
端点样式:context.lineCap = type
  属性 lineCap 的指决定了线段端点显示的楷模。它可以为下边包车型地铁二种的中间之壹:butt,round 和 square。私下认可是 butt。每个设置完的功效如下图lineCap部分从左到右所示。
连接点样式:context.lineJoin = type
  lineJoin 的属性值决定了图片中两线段连接处所展现的轨范。它能够是那三种之一:round, bevel 和 miter。默许是 miter。每一种设置完的职能如下图lineJoin部分从上到下所示。
斜面连接限制:context.miterLimit = value
  当使用miter效果时,线段的外面边缘会延伸交汇于一些上。线段直接夹角一点都比较大的,交点不会太远,但当夹角裁减时,交点距离会呈指数级增大。那时能够用miterLimit属性设定外延交点与连接点的最大距离,如若交点距离抢先此值,连接效果会成为了 bevel。

<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;
// 四分1 圆弧
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();

 图片 3

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

事举例下:

个体公众号(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();  
  }  
}  

图片 4

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

二、绘制轻巧矩形   矩形是无可比拟的骨干图形,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();

  除了那种措施,还能动用绘图路线的点子绘制矩形,那么些参看路线绘图部分。

本文由新浦京81707con发布于注册购买,转载请注明出处:Canvas绘制图形,canvas学习笔记

关键词: 新浦京81707con

上一篇:移动前端开发之viewport的深入理解

下一篇:没有了