HTML5 Canvas的基本用法介绍

var canvas = document.querySelector("canvas");    var ctx = canvas.getContext("2d");    function move() {        ctx.save()            ctx.translate(300,300)            //  初始化一些公共的样式            ctx.lineCap = 'round'            ctx.strokeStyle = 'black'            ctx.lineWidth = 8            ctx.scale(0.5,0.5)            // 画外面的圆            ctx.save();                ctx.beginPath();                ctx.strokeStyle = 'gold';                ctx.arc(0,0,150,0,2*Math.PI);                ctx.stroke();            ctx.restore();            // 画里面的刻度            ctx.save()                ctx.beginPath();                for (var i=0; i <p>静止的图像如下图。</p><p style="text-align: center;"><span class="img-wrap"><img src="https://img.php.cn//upload/image/207/367/164/1542961926883406.png" title="1542961926883406.png" alt="1056609250-5bf676267a57f_articlex.png"></span></p><h4>刮刮卡效果</h4><p>使用 canvas 的图形合成的属性可以实现图片合成的效果。具体应用于刮刮卡。<br>globalCompositeOperation属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上<br>源图像 = 您打算放置到画布上的绘图<br>目标图像 = 您已经放置在画布上的绘图</p><p   style="max-width:90%"><img src="https://img.php.cn//upload/image/360/936/462/1542961942862890.png" title="1542961942862890.png" alt="3627601659-5bf676cdb872b_articlex.png"></p><pre class="brush:php;toolbar:false">var  canvas = document.querySelector("canvas")    var ctx = getCtx()    log(ctx)    ctx.fillStyle = 'yellow'    ctx.fillRect(0,0,400,400)    ctx.globalCompositeOperation = 'destination-out';    // 鼠标按下    canvas.onmousedown = function (event) {        ctx.beginPath()        ctx.arc(event.clientX - canvas.offsetLeft,event.clientY - canvas.offsetTop,            20,0,2*Math.PI)        ctx.fill()        // 鼠标移动        document.onmousemove = function (event) {            ctx.beginPath()            ctx.arc(event.clientX - canvas.offsetLeft,event.clientY - canvas.offsetTop,            20,0,2*Math.PI)            ctx.fill()        }        // 鼠标抬起        document.onmouseup = function () {            document.onmousemove = document.onmouseup = null        }        return false    }