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);
//轮播图
}
浙公网安备 33010602011771号