学到画布，感觉喃喃哒
//画矩形
var c = document.getElementById('myCanvas');
var context = c.getContext('2d');
context.fillStyle = '#FF00FF';//用于填充颜色
context.fillRect(50,50,100,50);
context.moveTo(0,0);//规定直线的始点
context.lineTo(200,150);//规定直线的终点和moveto一样
context.stroke();//用于沿该路径绘制一条直线
//画圆
var d = document.getElementById('myCanvas1');
var context = d.getContext("2d");//
context.fillStyle = "green";
context.beginPath(); //开始绘制路径
context.arc(100,75,60,0,Math.PI*2,true);//绘画圆弧(起点x，起点y，半径r，开始角度，结束角度，是否按顺时针方向进行)
context.closePath(); //结束绘制路径
context.fill();//填充
//画多个圆弧
var e = document.getElementById("myCanvas2");
var context = e.getContext("2d");
for (var i=0; i < 15; i++) {
context.strokeStyle = "blueviolet";
context.beginPath();
context .arc(0,150,i*10,0,Math.PI*3/2,true);
context.closePath();//产生闭合效果
context.stroke();
}
//绘制三角形
var f = document.getElementById("myCanvas3");
var context = f.getContext("2d");
context.fillStyle = "red";
context.beginPath();
context.moveTo(15,15);
context.lineTo(140,15);
context.lineTo(15,140);
context.fill();//去掉后执行后面代码，将显示空心三角形
context.closePath();
context.stroke();
//绘制二次方贝塞尔曲线
var g = document.getElementById('myCanvas4');
var context = g.getContext('2d');
//下面开始绘制二次方贝塞尔曲线
context.strokeStyle = 'black';
context.beginPath();
context.moveTo(0,200);
context.quadraticCurveTo(30,30,200,150);//（控制点的坐标x，控制点的坐标y,终点坐标x，终点坐标y）
context.stroke();
context.globalCompositeOperation = 'source-over';
//下面绘制的直线用于表示上面曲线的控制点和控制线，控制点坐标即两直线的交点（30,30）
context.strokeStyle = 'darkblue';
context.beginPath();
context.moveTo(60,50);
context.lineTo(0,150);
context.moveTo(60,50);
context.lineTo(200,150);
context.stroke();
//缩放图形
var ctx = document.getElementById("myCanvas5").getContext("2d");
ctx.translate(200,20);
for (var i = 1; i < 80; i++){
ctx.save();
ctx.translate(30,30);
ctx.scale(0.9,0.88);
ctx.rotate(Math.PI*2);
ctx.beginPath();
ctx.fillStyle='red';
ctx.globalAlpha='0.5'; //颜色深浅
ctx.arc(0,0,50,0,Math.PI*2,true);
ctx.font = 'bold 35px blue';
ctx.fillText('我们来自同一个世界',30,100);
ctx.closePath();
ctx.fill();
}
//绘制径向渐变
function draw(){
var h = document.getElementById("myCanvas6").getContext("2d");
var radgrad = h.createRadialGradient(55,55,20,100,100,90);
radgrad.addColorStop(0,'#ffffff');
radgrad.addColorStop(0.75,'red');
radgrad.addColorStop(1,'#000000');
h.fillStyle = radgrad;
h.fillRect(10,10,170,180);
}
window.onload = function(){
draw();
}
我是html+css+javascript编程初学者，想学点网络的东西，平时电脑、手机会维修一下，总感觉买了电脑不学点东西就是浪费资源，几千块的机器不能这样就浪费掉了。我不喜欢玩游戏，也不迷恋视频，所以我觉得该学点实用的东西，至少无聊的时候可以看看敲敲代码。之所以选在html+css+javascript，是因为这个比较容易入门，对于C语言还是有点难入门。我是生化的，可以说和IT技术没有什么缘分，但是我相信：兴趣没有边界！科大的同学们，有兴趣的可以一起来讨论一下。零基础并不可怕，可怕的是零基础还不来学习。
基佬接头手势
