一、添加样式和颜色

​ 在前面的绘制矩形章节中,只用到了默认的线条和颜色。

​ 如果想要给图形上色,有两个重要的属性可以做到。

  1. fillStyle = color

    设置图形的填充颜色

  2. strokeStyle = color

    设置图形轮廓的颜色

  备注:

  1. `color` 可以是表示 `css` 颜色值的字符串、渐变对象或者图案对象。
  2. 默认情况下,线条和填充颜色都是黑色。
  3. 一旦您设置了 `strokeStyle` 或者 `fillStyle` 的值,那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色,你需要重新设置

1、fillStyle

 function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
for (var i = 0; i < 6; i++){
for (var j = 0; j < 6; j++){
ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
Math.floor(255 - 42.5 * j) + ',0)';
ctx.fillRect(j * 50, i * 50, 50, 50);
}
}
}
draw();

2、strokeStyle

 <script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
for (var i = 0; i < 6; i++){
for (var j = 0; j < 6; j++){
ctx.strokeStyle = `rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})`;
ctx.strokeRect(j * 50, i * 50, 40, 40);
}
}
}
draw();
/**
作者:李振超 4 Jun 2017 12:12
返回随机的 [from, to] 之间的整数(包括from,也包括to)
*/
function randomInt(from, to){
return parseInt(Math.random() * (to - from + 1) + from);
} </script>

3、Transparency(透明度)

globalAlpha = transparencyValue

​ 这个属性影响到 canvas 里所有图形的透明度,有效的值范围是 0.0 (完全透明)到 1.0(完全不透明),默认是 1.0。

​ globalAlpha 属性在需要绘制大量拥有相同透明度的图形时候相当高效。不过,我认为使用rgba()设置透明度更加好一些。

4、line style

(1) lineWidth = value

线宽。只能是正值。默认是1.0

起始点和终点的连线为中心,上下各占线宽的一半

“`javascript 
ctx.beginPath(); 
ctx.moveTo(10, 10); 
ctx.lineTo(100, 10); 
ctx.lineWidth = 10; 
ctx.stroke();

ctx.beginPath(); 
ctx.moveTo(110, 10); 
ctx.lineTo(160, 10) 
ctx.lineWidth = 20; 
ctx.stroke()

(2)lineCap = type

线条末端样式。

共有3个值:

  1. butt:线段末端以方形结束
  2. round:线段末端以圆形结束
  3. square:线段末端以方形结束,但是增加了一个宽度和线段相同,高度是线段厚度一半的矩形区域。

 var lineCaps = ["butt", "round", "square"];

 for (var i = 0; i < 3; i++){
ctx.beginPath();
ctx.moveTo(20 + 30 * i, 30);
ctx.lineTo(20 + 30 * i, 100);
ctx.lineWidth = 20;
ctx.lineCap = lineCaps[i];
ctx.stroke();
} ctx.beginPath();
ctx.moveTo(0, 30);
ctx.lineTo(300, 30); ctx.moveTo(0, 100);
ctx.lineTo(300, 100) ctx.strokeStyle = "red";
ctx.lineWidth = 1;
ctx.stroke();

(3) lineJoin = type

同一个path内,设定线条与线条间接合处的样式。

共有3个值roundbevel 和 miter

  1. round

    通过填充一个额外的,圆心在相连部分末端的扇形,绘制拐角的形状。 圆角的半径是线段的宽度。

  2. bevel

    在相连部分的末端填充一个额外的以三角形为底的区域, 每个部分都有各自独立的矩形拐角。

  3. miter(默认)

    通过延伸相连部分的外边缘,使其相交于一点,形成一个额外的菱形区域。

  4.  function draw(){
    var canvas = document.getElementById('tutorial');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d"); var lineJoin = ['round', 'bevel', 'miter'];
    ctx.lineWidth = 20; for (var i = 0; i < lineJoin.length; i++){
    ctx.lineJoin = lineJoin[i];
    ctx.beginPath();
    ctx.moveTo(50, 50 + i * 50);
    ctx.lineTo(100, 100 + i * 50);
    ctx.lineTo(150, 50 + i * 50);
    ctx.lineTo(200, 100 + i * 50);
    ctx.lineTo(250, 50 + i * 50);
    ctx.stroke();
    } }
    draw();

    (4)虚线

    用 setLineDash 方法和 lineDashOffset 属性来制定虚线样式. setLineDash 方法接受一个数组,来指定线段与间隙的交替;lineDashOffset属性设置起始偏移量.

  5.  function draw(){
    var canvas = document.getElementById('tutorial');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d"); ctx.setLineDash([20, 5]); // [实线长度, 间隙长度]
    ctx.lineDashOffset = -0;
    ctx.strokeRect(50, 50, 210, 210);
    }
    draw();

    备注:

    ​ getLineDash():返回一个包含当前虚线样式,长度为非负偶数的数组。

二、绘制文本

绘制文本的两个方法

canvas 提供了两种方法来渲染文本:

    1. fillText(text, x, y [, maxWidth])

      在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的.

    2. strokeText(text, x, y [, maxWidth])

      在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的.

 var ctx;
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
ctx = canvas.getContext("2d");
ctx.font = "100px sans-serif"
ctx.fillText("天若有情", 10, 100);
ctx.strokeText("天若有情", 10, 200)
}
draw();

给文本添加样式

  1. font = value

    当前我们用来绘制文本的样式。这个字符串使用和 CSS font属性相同的语法. 默认的字体是 10px sans-serif

  2. textAlign = value

    文本对齐选项. 可选的值包括:startendleftright or center. 默认值是 start

  3. textBaseline = value

    基线对齐选项,可选的值包括:tophangingmiddlealphabeticideographicbottom。默认值是 alphabetic。

  4. direction = value

    文本方向。可能的值包括:ltrrtlinherit。默认值是 inherit。

三、绘制图片

​ 我们也可以在canvas上直接绘制图片。

3.1 由零开始创建图片

创建<img>元素

 var img = new Image();   // 创建一个<img>元素
img.src = 'myImage.png'; // 设置图片源地址

脚本执行后图片开始装载

绘制img

//参数1:要绘制的img  参数2、3:绘制的img在canvas中的坐标
ctx.drawImage(img,0,0);

注意:

​ 考虑到图片是从网络加载,如果 drawImage 的时候图片还没有完全加载完成,则什么都不做,个别浏览器会抛异常。所以我们应该保证在 img 绘制完成之后再 drawImage

 var img = new Image();   // 创建img元素
img.onload = function(){
ctx.drawImage(img, 0, 0)
}
img.src = 'myImage.png'; // 设置图片源地址

3.2 绘制 img 标签元素中的图片

​ img 可以 new 也可以来源于我们页面的 <img>标签

 <img src="./美女.jpg" alt="" width="300"><br>
<canvas id="tutorial" width="600" height="400"></canvas>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
var img = document.querySelector("img");
ctx.drawImage(img, 0, 0);
}
document.querySelector("img").onclick = function (){
draw();
} </script>

第一张图片就是页面中的<img>标签

3.3 缩放图片

drawImage() 也可以再添加两个参数:

​ drawImage(image, x, y, width, height)

​ 这个方法多了2个参数:width 和 height,这两个参数用来控制 当像canvas画入时应该缩放的大小。

ctx.drawImage(img, 0, 0, 400, 200)

3.4 切片(slice)

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

​ 第一个参数和其它的是相同的,都是一个图像或者另一个 canvas 的引用。

其他8个参数:

​ 前4个是定义图像源的切片位置和大小,

​ 后4个则是定义切片的目标显示位置和大小。

四、状态的保存和恢复

Saving and restoring state是绘制复杂图形时必不可少的操作。

save()和restore()

​ save 和 restore 方法是用来保存和恢复 canvas 状态的,都没有参数。

​ Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。

  1. 关于 save()

    Canvas状态存储在栈中,每当save()方法被调用后,当前的状态就被推送到栈中保存。一个绘画状态包括:

    • 当前应用的变形(即移动,旋转和缩放)

    • strokeStylefillStyleglobalAlphalineWidthlineCaplineJoinmiterLimitshadowOffsetXshadowOffsetY,shadowBlurshadowColorglobalCompositeOperation 的值

    • 当前的裁切路径(clipping path

    可以调用任意多次 save方法。(类似数组的push())

  2. 关于restore()

    每一次调用 restore 方法,上一个保存的状态就从栈中弹出,所有设定都恢复。(类似数组的pop())

 var ctx;
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d"); ctx.fillRect(0, 0, 150, 150); // 使用默认设置绘制一个矩形
ctx.save(); // 保存默认状态 ctx.fillStyle = 'red' // 在原有配置基础上对颜色做改变
ctx.fillRect(15, 15, 120, 120); // 使用新的设置绘制一个矩形 ctx.save(); // 保存当前状态
ctx.fillStyle = '#FFF' // 再次改变颜色配置
ctx.fillRect(30, 30, 90, 90); // 使用新的配置绘制一个矩形 ctx.restore(); // 重新加载之前的颜色状态
ctx.fillRect(45, 45, 60, 60); // 使用上一次的配置绘制一个矩形 ctx.restore(); // 加载默认颜色配置
ctx.fillRect(60, 60, 30, 30); // 使用加载的配置绘制一个矩形
}
draw();
												

第155天:canvas(二)的更多相关文章

  1. 基于canvas二次贝塞尔曲线绘制鲜花

    canvas中二次贝塞尔曲线参数说明: cp1x:控制点1横坐标 cp1y:控制点1纵坐标 x: 结束点1横坐标 y:结束点1纵坐标 cp2x:控制点2横坐标 cp2y:控制点2纵坐标 z:结束点2横 ...

  2. canvas二:绘制圆和其他曲线

    1.绘制圆 绘制圆是canvas里面不可缺少的功课,而且绘制圆在canvas中的用处很多,好嘞,开扯 绘制圆需要用到arc这个方法: arc(X坐标,Y坐标,半径,起始弧度,结束弧度,旋转方向): 弧 ...

  3. canvas二三事之签名板与视频绘制

    今天,不知道怎么的就点开了语雀,然后就看到了<HTML5 Canvas 教程>,开始了canvas的研究(学习)之旅. 首先,想到的第一个东西就是签名板,上代码: <canvas i ...

  4. Flutter 35: 图解自定义 View 之 Canvas (二)

    小菜前几天整理了以下 Canvas 的部分方法,今天小菜继续学习 Canvas 第二部分. drawXXX drawShadow 绘制阴影 drawShadow 用于绘制阴影,第一个参数时绘制一个图形 ...

  5. 小程序对于华为Oppo的canvas二维码渲染数据量大

    setTimeout(()=>{ ctx.draw(false, function (e) { options.callback && options.callback(e); ...

  6. canvas二次贝塞尔&三次贝塞尔操作实例

    Canvas Quadratic Curve Example canvas = document.getElementById("canvas"); ctx = canvas.ge ...

  7. canvas生成二维码,并下载保存为本地的图片

    function getTicket(id,salt){//qrcode生成canvas二维码 $(".zc-mask").show(); $(".edit-box&qu ...

  8. [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

    之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

  9. 使用jquery.qrcode生成二维码(转)

    jQuery 的 qrcode 插件就可以在浏览器端生成二维码图片. 这个插件的使用非常简单: 1.首先在页面中加入jquery库文件和qrcode插件. <script type=" ...

随机推荐

  1. 20155231 实验二 Java面向对象程序设计

    20155231 java实验一 Java开发环境的熟悉 实验要求 没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑器> 课程: 完成实验.撰写实验 ...

  2. 《图说VR入门》——googleVR入门代码分析

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/53013843 作者:car ...

  3. 【BZOJ1951】[SDOI2010]古代猪文

    [BZOJ1951][SDOI2010]古代猪文 题面 bzoj 洛谷 题解 题目实际上是要求 $ G^{\sum d|n\;C_n^d}\;mod \; 999911659 $ 而这个奇怪的模数实际 ...

  4. 利用 Python 分析微信好友性别和位置

    今天用到一个非常有意思的库——itchat,它已经完成了 wechat 的个人账号API接口,使爬取个人微信信息更加方便.  下载 爬取微信好友信息 这样就将你所有微信好友的信息都返回了,我们并不需要 ...

  5. [ASP.NET Core] 建置x86版本 (workaround)

    前言 本篇文章介绍如何建置ASP.NET Core项目的x86版本输出(workaround),为自己留个纪录也希望能帮助到有需要的开发人员. ASP.NET Core官网 步骤 首先到微软官网的「. ...

  6. Python小白学习之如何添加类属性和类方法,修改类私有属性

    如何添加类属性和类方法,修改类私有属性 2018-10-26  11:42:24 类属性.定义类方法.类实例化.属性初始化.self参数.类的私有变量的个人学习笔记 直接上实例: class play ...

  7. python接口自动化1-发送get请求 前言

    前言 requests模块,也就是老污龟,为啥叫它老污龟呢,因为这个官网上的logo就是这只污龟,接下来就是学习它了. 一.环境安装 1.用pip安装requests模块 >>pip in ...

  8. 用Micro:bit做床头灯

    这是一个非常简单的项目,给孩子们介绍感应和控制,使用光敏电阻LDR作为光线传感器和床头灯的LED. 这也介绍了模拟输入的概念.数字输入为ON或OFF.只有0和1两种可能的条件.仿真输入是一系列可能值中 ...

  9. 在Unity中使用带碰撞体的TiledMap

    虽然最近Unity2018版本推出了自己的瓦片地图,但是这个瓦片地图有点BUG,在场景内把瓦片地图铺好做成预制体,动态生成的时候居然丢失了碰撞体,于是我决定还是使用Tiled软件绘制地图并使用Tile ...

  10. NES像素风格的Raspberry

    周末小实践,vue+树莓派+一言API 一直有个想法,让树莓派做后端,实现一个有趣的网络服务.可是,苦于不会前端,迟迟无法动手.最近由于工作任务需要研究了一下前端. 问过前端大佬们,个个都说你得用vu ...