• Canvas之图像与文字


    这节课程首先说明的是 如何才 canvas 中插入图像。

    canvas 插入图像的步骤:呵呵,又来了。

    1.首先当然准备一张图片了。

    2.用 drawImage 方法将图像插入到 canvas 中。

    drawImage 方法 有三种形态的参数可以选择

    第一种:

    我们先用最简单的方法写一个例子

    drawImage(image, x, y)   

    其中 image 是 image 或者 canvas 对象,x 和 y 是其在目标 canvas 里的起始坐标

    下面我们写一个例子说明一下。大家看一下就清楚了。

    JavaScript Code复制内容到剪贴板
    1. function draw() {  
    2.         var c = document.getElementById("mycanvas");  
    3.         var cxt = c.getContext("2d");  
    4.         var img = new Image();  
    5.         img.onload = function () {  
    6.             cxt.drawImage(img, 0, 0);  
    7.         }  
    8.         img.src = "2.png";  
    9.     }  

    好了,看一下效果吧。

    1

    第二种:

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

    参数就不用说的太清除了吧,图像的高和宽,呵呵。

    JavaScript Code复制内容到剪贴板
    1. function draw() {  
    2.     var c = document.getElementById("mycanvas");  
    3.     var cxt = c.getContext("2d");  
    4.     var img = new Image();  
    5.     img.onload = function () {  
    6.         //cxt.drawImage(img,0,0);  
    7.         for (i = 0; i < 4; i++) {  
    8.             for (j = 0; j < 4; j++) {  
    9.                 cxt.drawImage(img, j * 50, i * 50, 50, 50);  
    10.             }  
    11.         }  
    12.     }  
    13.     img.src = "2.png";  
    14. }  

    1

    第三种:

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

    最复杂drawImage 杂使用方法,包含上述5个参数外,

    另外4个参数设置源图像中的位置和高度宽度。这些参数允许你在显示图像前动态裁剪源图像。

    这回为了看到效果,我们采用这张图片,我们想办法只要  她的脑袋 

    11442931c-1[1]

    好了,开始裁剪,其实就是一些数字的问题【我上面的这张美女是 200*200】

    JavaScript Code复制内容到剪贴板
    1. function draw() {  
    2.         var c = document.getElementById("mycanvas");  
    3.         var cxt = c.getContext("2d");  
    4.         var img = new Image();  
    5.         img.onload = function () {  
    6.             cxt.drawImage(img, 80, 0, 100, 100, 50, 50, 100, 100);  
    7.         }  
    8.         img.src = "1.jpg";  
    9.     }  

    1

    看到了吗?只剩下一个脑袋了。

    下面我们开始 这节课的第二个内容----------文字

    有两个方法可以绘制文字:

    fillText 和 strokeText。

    第一个绘制带 fillStyle 填充的文字,后者绘制只有 strokeStyle 边框的文字。

    两者的参数相同:要绘制的文字和文字的位置(x,y) 坐标。还有一个可选选项——最大宽度。如果需要的话,浏览器会缩减文字以让它适应指定宽度。

    这个大家看想不想,绘制矩形的 那个 东东

    JavaScript Code复制内容到剪贴板
    1. function draw() {  
    2.         var c = document.getElementById("mycanvas");  
    3.         var cxt = c.getContext("2d");  
    4.         cxt.fillStyle = "#0f0";  
    5.         cxt.font = "bold 20px Arial";  
    6.         cxt.textBaseline = "top";  
    7.         cxt.fillText("KingDZ原创", 50, 50);  
    8.         //换种方式  
    9.         cxt.font = "italic 20px 微软雅黑";  
    10.         cxt.strokeText("KingDZ原创", 50, 100);  
    11.     }  

    效果图如下。

    1

    好了,图像和文字简单的入门就到这了,好文要顶啊!!!

  • 相关阅读:
    golang 常见疑惑总结
    golang 详解defer
    golang调试工具Delve
    ACE的源码划分
    通过#define连接字符串的特殊方法[转]
    转:extern "C"的用法解析
    转:3d max 2013 安装教程,凭着一种互联网精神提供给广大朋友
    转:Bullet物理引擎不完全指南(Bullet Physics Engine not complete Guide)
    转:折腾一晚上Bullet及Ogre相关工具的成果 -- 3Ds Max,Maya, blender, GameKit
    转:CMake快速入门教程-实战
  • 原文地址:https://www.cnblogs.com/yuzhongwusan/p/2248495.html
Copyright © 2020-2023  润新知