为啥要写手记为了----原创手记-慕课网

我看了一篇文章是
体验完成一件事的压力和乐趣
我决定开始写我自己的手记
不在美丽只在自己和学会用写作来思考
发现自己的方向
我的第一篇手记开始了告诉自己我在尝试努力
妈的又开学了
我又在重点班真他妈累
第一次的手记
虽然边学习编程边上学上高2 很累但是也要坚持上学时每天学一小时的编程
上学了，时间虽然少了但是也给了一个缓慢的环境可以将一些代码和思想牢记于心
注意这不是教材我可是一小垃圾啊我只是打算激励一下我自己
和告诉自己我可以为兴趣而战
先来总结一下这个星期学的我打算学习一下html的canvas 做一个游戏装一装逼
对我来说绝对是有难度的
我不是很熟悉 css 和JavaScript和HTML
好吧都不是很会我只是喜欢写作才来写手记的
并希望写作可以使我对学习编程的方法和学习如何学习这方面有提升
先是漫长的学习准备期
html canvas
canvas的坐标系统
不懂canvas的坐标系统那你就无法懂的那些奇奇怪怪的绘制方法
左上角为原点 x 向右边生长 y向下生长
canvas 默认大小是 300*150

矩形绘制
clearRecr(double x,double y,double w,double h);
fillRect(double x,double y,double w,double h);
strokeRect(double x,double y,double w,double h);
x y 是只他的坐标 w 宽度就是矩形横着的长度h 矩形树立的长度
html5 canvas 只不过是js的操作而已对现在的我来说
html代码中只哟是这样的就好
<canvas id="canvas" height="?" width="?'>
</canvas>
clearRect() 就是清理
fillRect()填充
strokeRect()描边

第一个例子

输入代码var canvas=document.getElementBy("canvas");
var context=canvas.getContext('2d');
context.lineJoin='round';
context.lineWidth=30;
context.font="38px Helvetica";
context.fillText('click anywhere to erase',175,400);
context.strokeText('click anywhere to erase',175,400);
context.strokeRect(75,100,200,200);
context.fillRect(325,100,200,200);
context.canvas.onousedown=function(e){
  context.clearRect(0,0,canvas.width,canvas.height);
}

关于颜色的透明度
hsla()
rgba()
中的第4个量中的才是透明度
渐变色
var canvsa=document.getElementById('canvas');
var context=canvas.getContext('2d');
var gradient=context.createLinearGradient(0,0,canvas.width,0);
gradient.addColorStop(0,'blue');
gradient.addColorStop(0.25,'white');
gradient.addColorStop(0.5,'yellow');
gradient.addColorStop(0.75,"red");
gradient.addColorStop(1,'yellow');

context.fillStyle=gradient;
context.rect(0,0,canvas.width,canvas,height);
可以换成
var gradient=context.createRadiaGradient(canvas.width/2,canvas.heihgt/2,10,
canvas.width,0,100)；
感觉渐变没啥用啊？
除非让他gradient.addColorStop(0-1,颜色);
0-1的参数可变产生一种正在加载的效果我也不知道可不可以

       接下来是我学了图案的使用
恩 我老是打都没实现  我在抄一遍也应该是错的

好吧我还是不打例子了我又不是大神我也累了
说下我学了啥 *以后就要把代码记下来

context.createPattern(image,多选)
可以是
repeat
repeat-x
repeat-y
no-repeat
mage 规定要使用的图片、画布或视频元素。
repeat 默认。该模式在水平和垂直方向重复。
repeat-x 该模式只在水平方向重复。
repeat-y 该模式只在垂直方向重复。
no-repeat 该模式只显示一次（不重复）。
image 可以是《img id="img"...》
var img=document.getElementById('img')
context.createPattern('img',' ?');
shadowColor
shadowOffsetX
shadowOffsetY
shadowBlur
stroke();
fill()
对路径进行描边和填充
beginPath() 会清除前面子路径

为啥要写手记 为了---

为啥要写手记为了---