<!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. DRM in Android详解--转

    DRM,英文全称为Digital Rights Management,译为数字版权管理.它是目前业界使用非常广泛的一种数字内容版权保护技术.随着知识产权保护受重视的程度日益提高,快速攻城略地得Andr ...

  2. docker报错“net/http: TLS handshake timeout”的解决方法

    为了永久性保留更改,您可以修改 /etc/docker/daemon.json 文件并添加上 registry-mirrors 键值. { "registry-mirrors": ...

  3. Office word 2007不能另存为pdf格式的解决方法

    我们在使用Office word 2007时,经常会使用到另存为 PDF 或 XPS(P),遗憾的是,很多人都找不到这个选项, 或者在安装word的时候,并没有安装该加载项,需要你在后期安装,我们来怎 ...

  4. 【CF900D】Unusual Sequences 容斥（莫比乌斯反演）

    [CF900D]Unusual Sequences 题意:定义正整数序列$a_1,a_2...a_n$是合法的,当且仅当$gcd(a_1,a_2...a_n)=x$且$a_1+a_2+...+a_n= ...

  5. python的十进制与任意进制的转换

    将任意进制转换成十进制 ", 8)) # 表示把8进制的54转换成十进制数并输出结果. # 8可以是2.8,10,16等进制数 将十进制转换成任意进制 def f(n,x): #n为待转换的 ...

  6. 使用Properties配置文件 InputStream与FileReader (java)

    java 开发中,常常通过流读取的方式获取 配置文件数据,我们习惯使用properties文件,使用此文件需要注意 文件位置:任意,建议src下 文件名称:任意,扩展名为properties 文件内容 ...

  7. Python：正则表达式的一些例子

    #匹配电话号码(前面3/4-后面7-8): '\d{3,4}-\d{7,8}' #匹配QQ号(从号码1000开始第一位不能为0): '[1,9][0,9]{4}' #匹配身份证(15位数或者18位,考 ...

  8. 忽略Git仓库中已经存在的文件

    解决方案 使用Git bash进入到要忽略的文件所在的文件夹,执行以下命令即可 git update-index --assume-unchanged rebel.xml 参考 Ignore Git ...

  9. 代码参数里的 payload 是什么意思???

    代码参数里的 payload 是什么意思???

  10. ie浏览器总跳转到 http://hao.360.cn

    起因在于  开启360某些防护之后,若出现使用ie无法打开网页的情况,那么就会跳转到http://hao.360.cn .把360的防护能关的都关掉,就不会跳转了. 第二个问题:chrome可以打开网 ...