上面代码所得

什么样的效果看一下呀，

向右看，这些相关课程都不错的

当然没有了，自己跟着老师好好学习吧

可以的，也可以用大神用的JetBrains WebStorm 编写代码

图像分辨率看看是多大、

context.drawImage(image,0,0）

canvas 画照片的时候没有设置宽高，canvas 会默认使用照片的实际宽高来画的

根本就没错，只是剪裁的圆的参数xy轴改一下就出来了！！！！！好坑爹啊

你把你的效果展示发在提问的问题里面干嘛。。

图片自适应，父元素宽度用百分比

没代码。。。

1. 换个大些图片。

2. 通过css把图片放到中间。

可以先定义一个变量存储定时器的状态，

代码可以这样写：

var state = false;
function reset(){
    clearInterval(timer);
    inintCanvas();
    state = true;

}

function show(){
    var timer = setInterval(function(){
        slippingRegion.r +=20;
    draw(img,slippingRegion);
    if (slippingRegion.r>= 2*Math.max(oCanvas.width,oCanvas.height)||state) {
        clearInterval(timer);
        state = false;
    }
    },30);
    
}

save() 和 restore() 方法允许你保存和恢复一个 CanvasRenderingContext2D 对象的状态。save() 把当前状态推入到栈中，而 restore() 从栈的顶端弹出最近保存的状态，并且根据这些存储的值来设置当前绘图状态。

CanvasRenderingContext2D 对象的所有属性（除了画布的属性是一个常量）都是保存的状态的一部分。变换矩阵和剪切区域也是这个状态的一部分，但是当前路径和当前点并不是。

应该是没有设置canvas的层级，z-index要比图片的层级高

你的具体代码不清楚 ，可能是因为你的数据设置问题，五角星的绘制牵扯到一个圆心问题，如果圆心没有translate重置，那么你的圆心就刚还在你设置的clip边缘上面，你可分析的看看，感觉就是圆心的设置问题，最简单的的方法测试就是把你的五角星的尺寸全部*0.5 看看如果显示好了，那么肯定是你的圆心坐标问题，可以看看老师前面的课程，收货真的很大

用的什么浏览器？换个浏览器试试？

html页面中canvas的dom定义没有？id对应是否一致？

现在只是一个空文件，以后会添加内容的

去了解下drawimage更详细的API后你就会完全了解canvas的绘图机制了~或者你看看这个视频

http://www.imooc.com/learn/338

里面就有清楚的讲解~

e我理解的是事件对象，就这次而言，这里的e没有什么用处，但是在别的地方会由用，还有两个函数不写一起是因为，当图片加载好了之后，要初始化clip这个对象（也就是老师之前写的clip什么的），而且在重置按钮中也要初始化，所以分开写。

你可以修复一下你的浏览器，可能播放的插件出问题了吧

刷新一下试试吧，我的就可以播放。

用图片创建pattern 作为 strokeStyle 能相对简单的实现

var canvasWidth = 2000;
var canvasHeight = 1143;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var isMouseDown = false;
var imageReady = false;
var lastPoint = {x: 0, y: 0};
canvas.width = canvasWidth;
canvas.height = canvasHeight;


var pattern ;
var image = new Image();
image.src = "image.jpg";
image.onload = function () {
    imageReady = true;
    pattern = context.createPattern(image,"no-repeat");
};

function windowToCanvas(x, y) {
    var bbox = canvas.getBoundingClientRect();
    return {
        x: Math.round(x - bbox.left),
        y: Math.round(y - bbox.top),
    };
}

canvas.onmousedown = function (e) {
    e.preventDefault();
    isMouseDown = true;
    lastPoint = windowToCanvas(e.clientX, e.clientY);
};
canvas.onmouseup = function (e) {
    e.preventDefault();
    isMouseDown = false;

};
canvas.onmouseout = function (e) {
    e.preventDefault();
    isMouseDown = false;

};
canvas.onmousemove = function (e) {
    e.preventDefault();
    if (isMouseDown) {
        var curPoint = windowToCanvas(e.clientX, e.clientY);

        imageLine(curPoint,lastPoint);

        lastPoint = curPoint;
    }

};

function imageLine(curPoint,lastPoint) {
    context.beginPath();
    context.moveTo(curPoint.x,curPoint.y);
    context.lineTo(lastPoint.x,lastPoint.y);
    context.strokeStyle=pattern;
    context.lineWidth=20;
    context.lineCap="round";
    context.stroke();

}

第60行代码错了

你写的是canvas.save()

应该是context.save();

网上没有

image.src = "1.jpg";

上面这段代码少了文件夹名称。

image.src = "images/1.jpg";

image.onload 处理函数里 这样设置 ：  img.width = canvasWidth;     img.height = canvasHeight;

 然后在画布画图的时候，给drawImage传入更多的参数可以解决。你试一下。context.drawImage(img, 0, 0, img.width, img.height);