<!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. Ubuntu 14.04 LTS 火狐浏览器中，鼠标选择文字被删除的解决办法

    这篇文章主要介绍了Ubuntu 火狐浏览器中,鼠标选择文字被删除的解决办法,需要的朋友可以参考下在终端中输入命令: ibus-setup将 “在应用程序窗口中启用内嵌编辑模式“ 选项取消

  2. sonarqube插件开发(二) 开发插件

    一.环境准备 java 1.8, maven 3.1 检查自己的环境是否支持 sonarqube的插件开发 java -version mvn -version 二.创建maven项目 pom.xml ...

  3. howdoi 简单分析

    对howdoi的一个简单分析. 曾经看到过下面的这样一段js代码: try{ doSth(); } catch (e){ ask_url = "https://stackoverflow.c ...

  4. mysql概要（十四）(二)索引（补充：外键级联操作）

    [ ON DELETE { NO ACTION | CASCADE | SET NULL | SET DEFAULT } ] [ ON UPDATE { NO ACTION | CASCADE | S ...

  5. like to do vs like doing

    I like to eat apple 表示我喜欢吃苹果这种食物. I like eating apple 表示我喜欢吃苹果这种食物 或者 表示我喜欢吃苹果这个过程. like to do,表达的是倾 ...

  6. Mysql: mysqlbinlog命令查看日志文件

    想查看mysql的binlog文件,但是裸的binlog文件是无法直视的,mysqlbinlog这个工具是用来查看binlog文件内容的(使用方式man mysqlbinlog查看),但是使用mysq ...

  7. Kibana在Linux上安装部署及使用说明

    Kibana安装及使用说明 Kibana是一个针对Elasticsearch的开源分析及可视化平台,用来搜索.查看交互存储在Elasticsearch索引中的数据. 官方地址:https://www. ...

  8. jquery选择器中的逗号

    $("span",this)等同于$(this).find('span') 中间逗号两个条件的并集

  9. MapReduce排序

    在map和reduce阶段进行排序时,比较的是k2.v2是不参与排序比较的.如果要想让v2也进行排序,需要把k2和v2组装成新的类,作为k2,才能参与比较. 例子: 二次排序:在第一列有序得到前提下第 ...

  10. POJ - 1088 滑雪 dp

    http://bailian.openjudge.cn/practice/1088?lang=en_US 题解: 设一个dp[N][N]数组代表从(i,j)坐标开始能滑到的最远距离.更新的方法为 遍历 ...