`
752954220_com
  • 浏览: 15418 次
  • 性别: Icon_minigender_2
  • 来自: 南京
社区版块
存档分类

Canvas标签使用实例

阅读更多

<!doctype html>
<html>
 <head></head>
 <body>
  <canvas width="500" height="800" style="background:yellow"  id="canvas">
   您的浏览器当前版本不支持canvas标签
  </canvas>
  <script>
   //获取画布DOM  还不可以操作
   var canvas=document.getElementById('canvas');
   //alert(canvas);
   //设置绘图环境
   var cxt=canvas.getContext('2d');
   //alert(cxt);
   
   //画一条线段。
    //开启新路径
    cxt.beginPath();
    //设定画笔的宽度
    cxt.lineWidth=10;
    //设置画笔的颜色
    cxt.strokeStyle="#ff9900";
    //设定笔触的位置
    cxt.moveTo(20,20);
    //设置移动的方式
    cxt.lineTo(100,20);
    //画线
    cxt.stroke();
    //封闭路径
    cxt.closePath();
   //画一个空心圆形  凡是路径图形必须先开始路径，画完图之后必须结束路径
    //开始新路径
    cxt.beginPath();
    //重新设置画笔
    cxt.lineWidth=3;
    cxt.strokeStyle="green";
    cxt.arc(200,200,50,0,360,false);
    cxt.stroke();
    //封闭新路径
    cxt.closePath();
   //画一个实心圆形
    cxt.beginPath();
    //设置填充的颜色
    cxt.fillStyle="rgb(255,0,0)";
    cxt.arc(200,100,50,0,360,false);
    cxt.fill();
    cxt.stroke();
    cxt.closePath();
   //画一个矩形
    cxt.beginPath();
    cxt.rect(300,20,100,100);
    cxt.stroke();
    cxt.closePath();
    //其他方法 建议使用此方式
    cxt.strokeRect(300,150,100,100)
    //实心矩形
    cxt.beginPath();
    cxt.rect(300,270,100,100);
    cxt.fill();
    cxt.closePath();
    //其他方法 建议使用此方式
    cxt.fillRect(300,390,100,100);
   //设置文字
    cxt.font="40px 宋体";//css font属性
    cxt.fillText("无兄弟，不编程",20,300);
    //将笔触设置为1像素
    cxt.lineWidth=1;
    cxt.strokeText("无兄弟，不编程",20,350);
   //画图 把一幅图片画到画布中  注意webkit内核的浏览器 chrome和猎豹不支持
    var img =new Image();
    img.src="xiaomm.jpg";
    cxt.drawImage(img,20,370,230,306);
   //画一个三角形
    cxt.beginPath();
    //移动至开始点
    cxt.moveTo(300,500);
    cxt.lineTo(300,600);
    cxt.lineTo(400,550);
    cxt.closePath();//填充或者画路径需要先闭合路径再画
    cxt.stroke();
    //实心三角形
    cxt.beginPath();
    //移动至开始点
    cxt.moveTo(300,600);
    cxt.lineTo(300,700);
    cxt.lineTo(400,650);
    cxt.closePath();
    cxt.fill();
   //旋转图片 图片
    //设置旋转环境
    cxt.save();
     //在异次元空间重置0,0点的位置
     cxt.translate(20,20);
    //图片/形状旋转
     //设置旋转角度  参数是弧度  角度 0-360 弧度=角度*Math.PI/180
     cxt.rotate(-30*Math.PI/180);
     //旋转一个线段
     cxt.lineWidth=10;
     cxt.beginPath();
     cxt.moveTo(0,0);
     cxt.lineTo(20,100);
     cxt.stroke();
     cxt.closePath();
    //将旋转之后的元素放回原画布
    cxt.restore();
    //过程不可颠倒 先设置00点在旋转角度，然后画图
    
   //旋转小萌萌
    cxt.save();
    cxt.translate(20,370);
    cxt.rotate(-10*Math.PI/180);
    var img =new Image();
    img.src="xiaomm.jpg";
    cxt.drawImage(img,0,0,230,306);
    cxt.restore();
    
    
    
    
  </script>
  
 </body>
</html>

分享到：
| Canvas标签使用及API
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    详解HTML5 Canvas标签及基本使用

    &lt;canvas&gt; 标签只是图形容器，您必须使用脚本来绘制图形。 实例 如何通过 canvas 元素来显示一个红色的矩形： &lt;canvas id=myCanvas&gt;&lt;/canvas&gt; [removed] var canvas=document.getElementById('myCanvas'); var ctx=...

    HTML5 canvas个人标签图代码.zip

    HTML5 canvas个人标签图代码，生成个人标签，标签云代码，标签图样式。

    HTML5 Canvas标签使用收录

    一、基本概念 ...目前支持 canvas 元素的浏览器有 Firefox 3+、Safari 4、Chrome 2.0+ 等，因此，在运行本页中的例子时，请确保你使用的是上述浏览器之一。 尽管在 Mozilla 已经有不少关于 Canvas 的

    canvas案例

    &lt;canvas&gt; 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。 在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。

    JS基于HTML5的canvas标签实现炫目的色相球动画效果实例

    本文实例讲述了JS基于HTML5的canvas标签实现色相球效果。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=UTF-8 /&gt; &lt;...

    Canvas资料大全 当下流行的画图标签Canvas ，提供了全面的实例，文档，希望对你的学习有所帮助

    及其稀罕的PHP框架YII的中文文档，以及相关的PHP学习 资料，对Yii和PHP的函数做了详细的介绍

    JavaScript使用canvas绘制随机验证码

    先构建一个画布，设置一定的宽高（在canvas中设置宽高和在style中设置是有区别的，建议直接在canvas标签中设置），封装一个生成随机数的方法，为线条和圆形的绘制设置随机的位置，既然是随机的，必然是有随机的区间...

    canvas需要在标签里直接定义宽高

    以前用canvas画图时，都是直接在canvas标签里直接写上宽高，没有问题，但也没有探究过为什么宽高要直接写在canvas标签里，因为各个资料的例子上都是这么写的。今天王sir提出了一个问题：如果把宽高写在&lt;style&gt;...

    微信小程序使用canvas的画图操作示例

    本文实例讲述了微信小程序使用canvas的画图操作。分享给大家供大家参考，具体如下： 基础写起来太没动力了，也写得乱七八糟的，还是直接解决一些小问题比较方便，代码的方方面面的细节都会详尽的解释一下。 1、下面...

    Html5新特性用canvas标签画多条直线附效果截图

    下面例子为用canvas标签画多条直线 复制代码代码如下: &lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt; &lt;html xmlns=”...

    p2e:使用Canvas将普通图片转换成一个div标签，并使用box-shadow将整张图还原，可设置还原等级

    使用Canvas将普通图片转换成一个div标签，并使用box-shadow将整张图还原，可设置还原等级 灵感源自： 在线DEMO： 使用文档 参数 size: 整数，色块儿尺寸，单位为像素 attrs: 对象，生成html元素的属性 space: 整数，...

    利用HTML5 Canvas制作键盘及鼠标动画的实例分享

    明白了这一点后，在canvas上绘制动画效果就显得比较简单了。我们只需要将某个静态图形先清除，然后在另外一个位置重新绘制，如此反复，让静态图形按照一定的轨迹进行移动，就可以产生动画效果了。 下面，我们在...

    实现小程序canvas拖拽功能

    使用movable-view标签 由于movable-view无法实现旋转，所以选择使用canvas 需要解决的问题 如何将多个元素渲染到canvas上 如何知道手指在元素上、如果多个元素重叠如何知道哪个元素在最上层 如何实现拖拽元素 如何...

    canvas实现弧形可拖动进度条效果

    1、首先在html中创建一个canvas标签 &lt;canvas id=canvas width=400 height=400&gt;&lt;/canvas&gt; 2、创建一个进度条对象，编写初始化方法,获取canvas对象及上下文环境；event方法是用来绑定事件（具体后面介绍）；draw是...

    leaflet-markers-canvas:一个 Leaflet 插件，用于在画布而不是 DOM 中渲染许多标记

    安装从 npm 安装： npm i leaflet-markers-canvas 或下载例子 var map = L . map ( "map" ) . setView ( [ 59.9578 , 30.2987 ] , 10 ) ;var tiles = L . tileLayer ( "http://{s}.tile.osm.org/{z}/{x}/{y}.png" , ...

    javascript canvas检测小球碰撞

    定义一个canvas标签 &lt;canvas id=canvas width=800 height=500 &gt;&lt;/canvas&gt; 函数以及相关的逻辑处理 export default { data() { return { canvas: null, ctx: null, arcObj: {} }; }, mounted() { ...

    js+canvas绘制五角星的方法

    本文实例讲述了js+canvas绘制五角星的方法。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

    JS+HTML5 canvas绘制验证码示例

    body中添加标签canvas： &lt;canvas id=c3&gt;&lt;/canvas&gt; js部分： //创建两个变量保存验证码的宽度和高度 var w = 120; var h = 30; //将变量值赋值给canvas c3.width = w; c3.height = h; //获取画笔 var

Magicbox
Global site tag (gtag.js) - Google Analytics