canvas
小涛涛啊!
这个作者很懒,什么都没留下…
展开
-
Canvas 第十一章 图形的组合方式
第十一章 图形的组合方式globalCompositeOperation=“type”;type的值:(11个) source-over:默认值,表示新图覆盖在旧图之上 source-atop:只绘制旧图和重叠的部分,其他透明source-in:只绘制新图的重叠部分,其他透明source-out:只绘制新图,重叠部分和旧图透明destination-over:表示旧图覆盖在新图之上destination-atop:只绘制旧图重叠的部分及新图未重叠部分,其他透明destin原创 2020-10-04 10:16:18 · 235 阅读 · 0 评论 -
Canvas 第十章 绘制曲线
第十章 绘制曲线<canvas height="500" width="500" id="canvas"></canvas> <script> var elem=document.getElementById("canvas"); var canvas=elem.getContext("2d"); // canvas.beginPath();// canvas.moveTo(85,73);// canvas.quadrat原创 2020-10-04 10:15:49 · 741 阅读 · 0 评论 -
Canvas 第九章 画布方法
第九章 画布方法<canvas height="500" width="500" id="canvas"></canvas> <script> var elem=document.getElementById("canvas"); var canvas=elem.getContext("2d"); canvas.save();//在还没有移动(200,200)画布之前, 我先保存一下画布(0,0) canvas.beginPath原创 2020-10-04 10:15:16 · 197 阅读 · 0 评论 -
Canvas 第八章 图像处理
第八章 图像处理绘制图像var elem=document.getElementById("canvas"); var canvas=elem.getContext("2d"); img=new Image(); img.src="img/test.jpg"; img.onload=function(n){ for(var i=0;i<3;i++){ canvas.drawImage(img,i*50,i*50,50,50); }原创 2020-10-04 10:14:53 · 86 阅读 · 0 评论 -
Canvas 第七章 阴影
第七章 阴影<canvas height="500" width="500" id="canvas"></canvas> <script> var elem=document.getElementById("canvas"); var canvas=elem.getContext("2d"); canvas.shadowColor="#FFCE44"; canvas.shadowOffsetX=10; canvas.shad原创 2020-10-04 10:14:08 · 76 阅读 · 0 评论 -
Canvas 第六章 文字(不需要创建路径)
第六章 文字<canvas id="canvas" height="600" width="600"></canvas> <script> var elem=document.getElementById("canvas"); var canvas=elem.getContext("2d");// // canvas.beginPath();// canvas.moveTo(100,0);// canvas.lineTo(1原创 2020-10-04 10:13:41 · 160 阅读 · 0 评论 -
Canvas 第五章 线型
第五章 线型<canvas id="canvas" height="600" width="600"></canvas> <script> var elem=document.getElementById("canvas"); var canvas=elem.getContext("2d"); canvas.beginPath(); canvas.moveTo(100,100); canvas.lineTo(200,18原创 2020-10-04 10:08:22 · 134 阅读 · 0 评论 -
Canvas 第四章 创建路径
第四章 创建路径<canvas height="500" width="500" id="canvas"></canvas> <script> var elem=document.getElementById("canvas"); var canvas=elem.getContext("2d"); // canvas.beginPath();// canvas.rect(10,10,150,150);// canva原创 2020-10-04 10:16:37 · 116 阅读 · 0 评论 -
Canvas 第三章 渐变
第三章 渐变<canvas height="500" width="500" id="canvas"></canvas> <script> var elem=document.getElementById("canvas"); var canvas=elem.getContext("2d"); var grad=canvas.createLinearGradient(0,0,500,500); grad.addColorStop(原创 2020-10-03 11:06:57 · 64 阅读 · 0 评论 -
Canvas 第二章 填充颜色
第二章 填充颜色填充颜色<canvas height="500" width="500" id="canvas"></canvas> <script> var elem=document.getElementById("canvas"); var canvas=elem.getContext("2d"); canvas.fillStyle="#e4532a"; canvas.strokeStyle="blue"; can原创 2020-10-03 11:02:03 · 377 阅读 · 0 评论 -
Canvas 画布 第一章 简单概念
第一章 简单概念什么是canvas(画布)?基本使用调用getContext()方法canvas API绘制矩形canvas height="500" width="500" id="canvas"></canvas> <script> var elem=document.getElementById("canvas"); var canvas=elem.getContext("2d"); canvas.strokeRe原创 2020-10-03 10:56:15 · 92 阅读 · 0 评论