<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CANVAS</title>

</head>

<body>

    <canvas height="800" width="800" style="background: pink" id="canvas1">

        您的当前浏览器版本不支持canvas标签

    </canvas>

    <script type="text/javascript">

        //获取标签元素

        var ext = document.getElementById("canvas1");

        // alert(ext)

        //创建环境

        var cxt=ext.getContext("2d");

        //画直线

            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(70,100,50,0,360,false);

            cxt.stroke();

            cxt.closePath();

            //画圆  实心

            cxt.beginPath();

            cxt.lineWidth=3;

            cxt.fillStyle="yellow";

            cxt.arc(200,100,50,0,360,false);

            cxt.fill();

            cxt.stroke();

            cxt.closePath();

            //画矩形 空心

            cxt.beginPath();

            // cxt.rect(10,200,60,60);

            // cxt.stroke();下面一句代码就是简写，推荐用下面的写法

            cxt.strokeRect(10,200,60,60);

            cxt.closePath();

            //画矩形 实心

            cxt.beginPath();

            // cxt.rect(80,200,60,60);

            // cxt.fill();下面一句代码就是简写，推荐用下面的写法

            cxt.fillRect(80,200,60,60);

            cxt.closePath();

            //添加文本

            cxt.beginPath();

            cxt.font="40px 宋体";

            cxt.fillText("无兄弟",20,300);

            cxt.lineWidth=1;

            cxt.strokeText("无兄弟",20,350);

            cxt.closePath();

            //将图片画到画布上面去 谷歌不支持

            var img=new Image();

            img.src="0.jpg";

            cxt.drawImage(img,20,400,400,300);

            //画三角形

            cxt.beginPath();

            cxt.moveTo(200,20);

            cxt.lineTo(300,20);

            cxt.lineTo(350,50);

            cxt.lineTo(200,20);

            cxt.closePath();

            cxt.fill();

            cxt.stroke();

            //旋转一个字段

            cxt.save();

            cxt.translate(20,20);

            cxt.rotate(-60*Math.PI/180);

            cxt.beginPath();

            cxt.lineWidth=10;

            cxt.moveTo(0,0);

            cxt.lineTo(20,100);

            cxt.stroke();

            cxt.closePath();

            cxt.restore();

            //旋转图片

            cxt.save();

                cxt.translate(20,400);

                cxt.rotate(-10*Math.PI/180);

                var img =new Image();

                img.src="0.jpg";

                cxt.drawImage(img,0,0,400,300);

                cxt.restore();

    </script>

</body>

</html>

Canvas标签基础的更多相关文章

  1. HTML5新增Canvas标签及对应属性、API详解（基础一）

    知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...

  2. canvas绘画基础(一)：认识canvas画布

    html5提供了一个<canvas>标签,结合javascript的canvas api接口可以用来绘制图形和动画.最近工作中涉及到画图的任务,下面来了解一下canvas的基础:canva ...

  3. canvas学习笔记（上篇）-- canvas入门教程 -- canvas标签/方块/描边/路径/圆形/曲线

    [上篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  4. HTML5<canvas>标签:简单介绍(0)

    <canvas> 标签是 HTML 5 中的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件, 其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读<html5与c ...

  5. HTML5 Canvas（基础知识）

    最近笔者在学习HTML5的新元素<canvas>,会分享一些基础知识以及小例子,最终使用<canvas>实现一个绘制简单图表(条形图.线图或者饼图)的js库,会更新一到两篇文章 ...

  6. html5之canvas画图基础

    HTML5+CSS3的好处是,你可以编写一个页面分别用于不同的平台,只需要设置不同的css样式就可以了,现在基本主流浏览器都支持全新的HTML5和CSS3,因为它的跨平台开发.因为是原生代码所以它的页 ...

  7. canvas标签(1)--线条、矩形、圆形、文本、阴影、抛小球

    从网上扒拉的代码,敲了敲代码玩. html页面显示内容很简单,只要写个canvas标签,给他一个id写js就可以了 <!DOCTYPE html> <html> <hea ...

  8. html5 canvas标签

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. HTML5自学笔记[ 11 ]canvas绘图基础1

    html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...

随机推荐

  1. Android studio 怎么使用已经下载好的Android SDK ?

    AS:3.1.2 ---> android-studio-ide-173.4720617-windows32.zip sdK: gradle:4.4 1. 2. 3. 4. 5. 下面重要一步, ...

  2. 学习生活必须知道的网站或者App

    转载自:https://www.douban.com/group/topic/89798480/ 学习方面: 1.网易公开课(http://v.163.com/special/test/alltest ...

  3. facebook login issue

    If enable the facebook account in settings, when change account can't open the session. -(void)fbRes ...

  4. 分布式搜索elasticsearch几个概念解析

    原文链接:http://blog.csdn.net/july_2/article/details/24367177 介绍下es的几个概念:cluster     代表一个集群,集群中有多个节点,其中有 ...

  5. html 自动弹出框

    1.点击div外部隐藏, //*代表tip_box所包含的子元素 $('body').click(function(e) { var target = $(e.target); if(!target. ...

  6. Java 构造函数（抽象类中的构造函数） 和 加载

    博客分类: 面向对象设计的原则 与 概念   1. Java 的构造函数 与初始化块: a. 抽象类的构造函数 若果在父类中(也就是抽象类)中显示的写了有参数的构造函数,在子类是就必须写一个构造函数来 ...

  7. JDBC及Filter

    JNDI容器:Java Naming Directory Interface,java命名目录接口EJB:javaEE服务器端组件模型,Enterprise JavaBean,设计目标与核心应用是建立 ...

  8. Oracle体系结构之rac内存管理

    一.内存管理第一层: 1.memory_target和memory_max_target开启自动内存管理. rac1: SQL> show parameter memory NAME TYPE ...

  9. 初识Spring Webflux

    Important to know is that there are two ways to use Spring Webflux. One using annotations, which is ...

  10. cordova 跨平台APP版本升级

    利用cordova+ionic开发好项目,之后就是打包发布,在这之前,还要做一个版本升级的小功能. 首先我们项目根目录里自然少不了配置:config.xml中 如图.version,我们以后每次升级A ...