H5之 Canvas图形实现

视频课：https://edu.csdn.net/course/play/7621

<!DOCTYPE html>

<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       
       <canvas id="mycanvas" width="100" height="100">测试浏览器</canvas>
       
       <script language="JavaScript">
           //根据id，来得到网页上的画布元素对象
           var c=document.getElementById("mycanvas");
           var ctx=c.getContext("2d");//2d内容
           //1.预备;
           ctx.beginPath();
           //2.设置起点;,就是设置起点的(x,y)坐标
           ctx.moveTo(10,10);
           //3.移动到终点;
           ctx.lineTo(100,10);
           ctx.lineTo(10,100);
           ctx.lineTo(100,100);

           ctx.lineTo(10,10);
           //4.绘制轮廓;
           ctx.stroke();
       </script>
   </body>

</html>

图形效果：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <script language="JavaScript">
           //定义一个函数,类似于java的方法
           function drawRect(){
               var c=document.getElementById("mycanvas2");
               var ctx=c.getContext("2d");
               //压缩代码
               ctx.fillStyle="yellow";//填充样式
               ctx.lineWidth=10;
               ctx.strokeStyle="blueviolet";
               ctx.strokeRect(20,20,50,100);
               ctx.fillRect(20,20,50,100);
               ctx.clearRect(30,30,30,20);
//               ctx.beginPath();
//               ctx.rect(10,10,100,50);//绘制矩形
//               ctx.stroke();
           }
           //把自定义的函数，加到load事件监听中
           //addEventLister在整个页面加载完毕去添加响应;
           window.addEventListener("load",drawRect,true);//js可以位于上方;
           //window.οnlοad=drawRect(); 这个还是js在下面
       </script>
       <canvas id="mycanvas2" width="500" height="500"></canvas>
   </body>
</html>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <script>
           function drawArc(){
               var c=document.getElementById("mycanvas3");
               var ctx=c.getContext("2d");
               ctx.beginPath();
               //起始度：弧度;这个地方不是度
               //PI 弧度=180度
               ctx.strokeStyle="red";//设置轮廓的样式
               ctx.arc(50,50,40,Math.PI/2,2*Math.PI,false);//绘制
               ctx.stroke();
           }
           window.addEventListener("load",drawArc,true);
       </script>
       <canvas id="mycanvas3" width="500" height="500"></canvas>
   </body>
</html>

H5之 Canvas图形实现相关推荐

用h5的canvas实现动画的泡沫
效果图一代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
关于h5绘制canvas生成图片的注意点！
1.第一个是关于移动端自适应的问题: 答:如果是最后只要一张canvas生成的图片,而不是要绘制的canvas的图形,则不需要考虑自适应,绘制canvas的时候的宽高,可以直接写成UI提供的图的大小, ...
H5画布 canvas（一）canvas简介、绘制圆形矩形、案例饼状图绘制
目录 1. canvas 简介 2. canvas 标签介绍 3. canvas 上下文 Context 4. 案例:在 canvas 画布中绘制表格 5. canvas 的 beginPath 状态 ...
H5画布 canvas（一）canvas简介、绘制圆形/矩形、案例饼状图绘制
目录 1. canvas 简介 2. canvas 标签介绍 3. canvas 上下文 Context 4. 案例:在 canvas 画布中绘制表格 5. canvas 的 beginPath 状态 ...
php开发h5游戏,H5的canvas实现贪吃蛇小游戏
这次给大家带来H5的canvas实现贪吃蛇小游戏,H5的canvas实现贪吃蛇小游戏注意事项有哪些,下面就是实战案例,一起来看一下. 本文介绍了H5 canvas实现贪吃蛇小游戏,分享给大家,具体如下 ...
canvas图形放大缩小鼠标拖拽
canvas图形放大缩小鼠标拖拽在网上找的都是放大缩小,或者鼠标拖拽,没有两者都满足的一开始我天真的以为两个合并就可以了,但其实当鼠标松开和点击的时候,坐标原点是会变的,就是每次拖拽都是清除之前, ...
html动画转换为gif,h5使用canvas输出为gif动画图片
使用h5的canvas提供的接口很容易实现一些动画,如果能把这些动画实现成gif动图就更好啦,还真有大神实现啦这个功能下面说明使用方法开源库地址首先引入需要的js文件gif.js在页面里自己创建一 ...
【canvas 图形画布标签】(使用详解)
canvas 图形画布标签 1. 如何定义一个图形画布 ? 1.1 canvas 图形画布标签的属性有哪些 ? 1.2 canvas 图形画布的基本用法有哪些 ? 1.3 如何使用 canv ...
html5游戏制作raf,HTML5之弧度角度与sincos(五角星绘制)、Canvas图形组合、阴影、图像绘制及createJS应用...
弧度与sin及cos的关系目的: 通过理解弧度与sin及cos的关系,可以根据弧度及半径求出旋转指定弧度后所到达的dx,dy坐标弧度(angle)与角度(degree)的关系: 360角度 = 2 ...

H5之 Canvas图形实现

H5之 Canvas图形实现相关推荐

最新文章

热门文章