<!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. mysql select缓存使用详解

    mysql Query Cache 默认为打开.从某种程度可以提高查询的效果,但是未必是最优的解决方案,如果有的大量的修改和查询时,由于修改造成的cache失效,会给服务器造成很大的开销,可以通过qu ...

  2. html5media 视频

    官网: https://html5media.info/ 二.引入script <script src="//api.html5media.info/1.1.8/html5media. ...

  3. EF---延迟加载技术

    延迟加载: 优点:只在需要的时候加载数据,不需要预先计划,避免了各种复杂的外连接.索引.视图操作带来的低效率问题 使用方式:两步 第一:在需要延迟加载的属性前加上virtual ,该属性的类型可以是任 ...

  4. 使用jetty的continuations实现"服务器推"

    在实际的开发中,我们可能会有这样的场景:许多客户端都连接到服务器端,当有某个客户端的消息的时候,服务器端会主动"推"消息给客户端,手机app的推送是一个典型的场景(IOS的推送都是 ...

  5. 更新jenkins插件，报错 Perhaps you need to run your container with "-Djava.awt.headless=true"?

    Configuring the Java environment variables vi ~/.bash_profile 在最后一行加入: export JAVA_OPTS=-Djava.awt.h ...

  6. windows桌面通知区域不显示音量图标的解决方法

    在windows系统桌面通知区域一般都是显示的输入法.电源.网络.音量及托盘的应用程序等内容 通知区域图标显示与否与控制面板的通知区域图标的设置有关,我们有时会遇到通知区域不显示个别图标的情况,如不显 ...

  7. [转]Android Activity的加载模式和onActivityResult方法之间的冲突

    前言 今天在调试程序时,发现在某一Activity上点击返回键会调用该Activity的onActivityResult()方法.我一开始用log,后来用断点跟踪调试半天,还是百思不得其解.因为之前其 ...

  8. msql_createdb: 建立一个新的 mSQL 数据库。

    mcrypt_ecb: 使用 ECB 将资料加/解密. mcrypt_get_block_size: 取得编码方式的区块大小. mcrypt_get_cipher_name: 取得编码方式的名称. m ...

  9. POJ-2353 Ministry（动态规划）

    Ministry Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 4761 Accepted: 1528 Special Judg ...

  10. C++基础知识之动态库静态库

    一. 静态库与动态库 库(library),一般是一种可执行的二进制格式,被操作系统载入内存执行. 我们通常把一些公用函数制作成函数库,供其它程序使用.函数库分为静态库和动态库 静态库和动态库区别: ...