draw() { // ctx.fillStyle = "rgb(red,0,0)"; //设置填充色 // ctx.fillStyle="red"; //画矩形 // ctx.fillRect(10, 90, 100, 120); //画出矩形 实心的 ctx.fillStyle = "rgba(254, 254, 254, 1)"; //设置颜色并设置透明度为 0.5 ctx.fillRect(0, 0, screenWidth, screenHeight); // ctx.strokeRect(40,80,130,80); //绘制矩形边框 // ctx.clearRect(20,20,60,60); //清除指定区域 //画线 // ctx.beginPath(); // ctx.strokeStyle = "blue"; // 设置线条颜色 // ctx.moveTo(10, 10); //起始点 // ctx.lineTo(100, 10); //画一条长度为100， y轴为 +10 的线 // ctx.lineTo(200, 200); //从上一条线的结束点开始画 // ctx.closePath(); //关闭节点， 形成包围图形 闭合路径 // ctx.fillStyle = "green"; //指定填充颜色 // ctx.fill(); //开始填充 // ctx.stroke(); //开始画图 //画圆形 // ctx.beginPath(); // ctx.strokeStyle = "blue"; // ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制 // ctx.moveTo(110, 75); // ctx.arc(75, 75, 35, 0, Math.PI, false); // 口(false 表示 顺时针画) // Math.PI 表示画半块， // ctx.moveTo(65, 65); // ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼 // ctx.moveTo(95, 65); // ctx.stroke(); // ctx.beginPath(); // // ctx.fillStyle="red"; // ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼 // ctx.fill(); //画图片 // var img = new Image(); // img.onload = function(){ // // ctx.drawImage(img, 10, 10); //只指定位置 // // ctx.drawImage(img, 10, 10, 302/4, 300/4); //指定位置, 指定宽度 // ctx.drawImage(img, 60, 80, 175, 175, 30, 30, 190, 190); //图片切片， 60, 80, 175, 175 切图片区域， 30, 30, 90, 90 将切后的图片画的位置 // } // img.src = 'images/angle.jpg'; //透明度使用 // var img = new Image(); // img.onload = function(){ // ctx.globalAlpha = 0.5; // ctx.drawImage(img, 10, 10); // ctx.globalAlpha = 0.6; // ctx.fillRect(125, 125, 80, 85); // } // img.src = 'images/angle.jpg'; //渐变使用--矩形渐变 // var lingrad = ctx.createLinearGradient(0, 0, 0, 400); // 400 400 //图片的渐变 // lingrad.addColorStop(0, '#00ABEB'); // lingrad.addColorStop(0.5, '#fff'); // 0-0.5 由蓝色渐变为白色 // lingrad.addColorStop(0.5, '#66CC00'); //改成绿色 // lingrad.addColorStop(1, '#fff'); //0.5-1 渐变为白色 // var lingrad2 = ctx.createLinearGradient(0, 0, 0, 250); //黑色边框的渐变 // lingrad2.addColorStop(0.5, '#000'); // lingrad2.addColorStop(1, 'rgba(0,0,0,0)'); // // assign gradients to fill and stroke styles // ctx.fillStyle = lingrad; // ctx.strokeStyle = lingrad2; // // draw shapes // ctx.fillRect(10, 10, 350, 350); // ctx.strokeRect(110, 130, 150, 150); //球型渐变 // var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30); // radgrad.addColorStop(0, '#A7D30C'); // radgrad.addColorStop(0.9, '#019F62'); // radgrad.addColorStop(1, 'rgba(1,159,98,0)'); // var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50); // radgrad2.addColorStop(0, '#FF5F98'); // radgrad2.addColorStop(0.75, '#FF0188'); // radgrad2.addColorStop(1, 'rgba(255,1,136,0)'); // var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40); // radgrad3.addColorStop(0, '#00C9FF'); // radgrad3.addColorStop(0.8, '#00B5E2'); // radgrad3.addColorStop(1, 'rgba(0,201,255,0)'); // var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90); // radgrad4.addColorStop(0, '#F4F201'); // radgrad4.addColorStop(0.8, '#E4C700'); // radgrad4.addColorStop(1, 'rgba(228,199,0,0)'); // // draw shapes // ctx.fillStyle = radgrad4; // ctx.fillRect(0, 0, 150, 150); // ctx.fillStyle = radgrad3; // ctx.fillRect(0, 0, 150, 150); // ctx.fillStyle = radgrad2; // ctx.fillRect(0, 0, 150, 150); // ctx.fillStyle = radgrad; // ctx.fillRect(0, 0, 150, 150); //save和restore方法 // var img = new Image(); // img.onload = function () { // ctx.save(); //先将画笔保存起来 // ctx.globalAlpha = 0.5; //改变了画笔的透明度 // ctx.drawImage(img, 100, 50); //画图片 // ctx.restore(); //恢复画笔（透明度恢复成 1） // ctx.fillRect(120, 100, 50, 50); //画矩形 // } // img.src = 'images/angle.jpg'; // save和restore方法是用来保存和恢复canvas状态的 // canvas状态就是当前画面应用的所有样式和变形的一个快照 // 每次save，当前的状态就会被推入堆中保存起来 // 每次restore，上一个保存的状态就会从堆中弹出，所有设定都恢复 // save可以嵌套调用，和restore一一对应 //移动画笔 // var img = new Image(); // img.onload = function () { // ctx.drawImage(img, 10, 10); // ctx.globalAlpha = 0.5; // ctx.translate(20, 20); //重新定位画笔位置 // ctx.fillRect(0, 0, 50, 50); // } // img.src = 'images/angle.jpg'; // rotate 以起始点作为原点旋转 // var img = new Image(); // img.onload = function () { // ctx.drawImage(img, 0, 0); // ctx.rotate((45).toRad()); //调用 toRad 旋转45度 // ctx.fillRect(0, 0, 50, 50); // } // img.src = 'images/angle.jpg'; // Number.prototype.toRad = function () { // return Math.PI * this / 180; // } //rotate 以起始点作为原点旋转 // var img = new Image(); // img.onload = function () { // ctx.drawImage(img, 0, 0); // ctx.translate(25, 25); //移动画笔坐标系到矩形的中心点， 在这个点上旋转 // ctx.rotate((45).toRad()); //调用 toRad 旋转45度 // ctx.translate(-25, -25); //恢复坐标到原位置 // ctx.fillRect(0, 0, 50, 50); // } // img.src = 'images/angle.jpg'; // Number.prototype.toRad = function () { // return Math.PI * this / 180; // } //scale 缩放 // var img = new Image(); // img.onload = function () { // ctx.drawImage(img, 0, 0); // ctx.translate(25, 25); // ctx.scale(2, 2); //长 宽 都放大2倍 // ctx.translate(-25, -25); // ctx.fillRect(0, 0, 50, 50); // } // img.src = 'images/angle.jpg'; //动画 // var sun = new Image(); // var moon = new Image(); // var earth = new Image(); // sun.src = 'images/sun.png'; // moon.src = 'images/moon.png'; // earth.src = 'images/earth.png'; // ctx.globalCompositeOperation = 'destination-over'; // ctx.clearRect(0, 0, 300, 300); // clear canvas // ctx.fillStyle = 'rgba(0,0,0,0.4)'; // ctx.strokeStyle = 'rgba(0,153,255,0.4)'; // ctx.save(); // ctx.translate(150, 150); // // Earth // var time = new Date(); // ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds()); // ctx.translate(105, 0); // ctx.fillRect(0, -12, 50, 24); // Shadow // ctx.drawImage(earth, -12, -12); // // Moon // ctx.save(); // ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds()); // ctx.translate(0, 28.5); // ctx.drawImage(moon, -3.5, -3.5); // ctx.restore(); // ctx.restore(); // ctx.beginPath(); // ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit // ctx.stroke(); // ctx.drawImage(sun, 0, 0, 300, 300); //轮播图 }