第一步：HTML

<div class="box">
    <canvas class="mycan"  id="mycan" width="300" height="200"></canvas>
</div>

canvas 是必须的。设定好大小，同时要准备好几张妹子图。

不出意外的话，妹子图跟 canvas 大小是一样的。

不要增加自己的编码工作量。

第二步：CSS

.box{
    width: 300px;
    height: 200px;
    overflow: hidden; 
    margin-left: auto;
    margin-right: auto;
}
.box .mycan{
    display: block;
}

这个 CSS 就是做基础的框架设置。

第三步：JavaScript

主要思路：

1、获取 canvas ，并得到 content。

2、设置奖品图片数组

3、【关键】生成一个图片对象，new Image()，方便设置画笔笔触内容

canvas 的画笔笔触内容除了是色彩外，还可以是图片内容。这里用到的关键就是：

  // 设置笔触内容为图片，这样画出来的就是图片内容，而不是单纯的色彩线条
    ctx.strokeStyle = ctx.createPattern(img, 'no-repeat');

w3school 上对 createPattern 的解释是：

createPattern() 方法在指定的方向内重复指定的元素。元素可以是图片、视频，或者其他 <canvas> 元素。被重复的元素可用于绘制/填充矩形、圆形或线条等等。

言外之意，通过 createPattern 方法，在 canvas 中可以用图片来做填充部分，也可以用来做画笔笔触部分。

4、刮奖的过程，其实就是获取鼠标坐标，沿着坐标绘制图片的过程。所以，接下来的代码就是获取鼠标坐标，再画线的思路。

完整代码如下：

// 获取canvas ID，相当于画布
let mycan = document.getElementById("mycan");
// 获取canvas 的上下文，相当于 画笔。
let ctx = mycan.getContext("2d");

// 奖品图片
let images = [
    "images/1.jpg",
    "images/2.jpg",
    "images/3.jpg"
];

// 生成图像对象，作为画笔填充内容。
let img = new Image();
img.src = images[ Math.floor( Math.random()*3 ) ];

// 初始化画布，已经画布上的提示文字
 let intCanvas = function(){
     ctx.fillStyle = "#999";   // 填充背景色
     ctx.fillRect(0,0,mycan.width,mycan.height); // 设置填充范围，跟 canvas 大小一样
     // 设置刮奖文字：颜色，字体大小，水平居中，文字内容和位置。
     ctx.fillStyle = "#000";  // 重新设置填充颜色为黑色
     ctx.font="40px  'Microsoft Yahei'";
     ctx.textAlign = "center";
     ctx.fillText("刮开有惊喜", mycan.width/2,mycan.height/2+10);
 };

// 定义鼠标在canvas上移动的函数
let mMove = function( event ){
    let e = event || window.event;
    ctx.lineTo(e.offsetX,e.offsetY);  // 画线条到 鼠标位置
    ctx.stroke();
};

// 鼠标按下函数
let mDown = function(event){
    let e = event || window.event;
    // 开始canvas路径
    ctx.beginPath();
    // 画笔起笔的地方
    ctx.moveTo(e.offsetX,e.offsetY);  // 画线条到 鼠标位置
    // 移动鼠标就作画
    mycan.addEventListener("mousemove",mMove);
};

// 鼠标松开函数
let mUp = function(){
    // 封闭canvas路径
    ctx.closePath();
    // 移除mousemove事件
    mycan.removeEventListener("mousemove",mMove);
};

// 功能主体部分
intCanvas();

// 因为要保证图片加载完毕，才能执行代码。所以，使用 img.onload 事件。
img.onload = function() {
    // 设置笔触内容为图片，这样画出来的就是图片内容，而不是单纯的色彩线条
    ctx.strokeStyle = ctx.createPattern(img, 'no-repeat');
    // 设置画笔的粗细
    ctx.lineWidth = 50;
    // 设置线条头尾为圆形。
    ctx.lineCap = "round";
    // 设置线条拐点处为圆形
    ctx.lineJoin = 'round';

    // 鼠标按下，准备开始画画
    mycan.addEventListener("mousedown", mDown);
    // 鼠标抬起，停止做画。
    mycan.addEventListener("mouseup", mUp);
};

感觉自己好久没更新博客了，最近太忙，哎~~想我的暑假，快来啊~~啊啊啊啊啊~~~~

JavaScript 练手小案例：原生JavaScript制作 Canvas 随机刮奖，抽妹子图

第一步：HTML

第二步：CSS

第三步：JavaScript

猜你喜欢