<!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. Cmd find命令 和 findstr 命令

    https://blog.csdn.net/icanlove/article/details/37567591   Windows CMD中 find命令(字符串查找) https://blog.cs ...

  2. [原]git的使用(二)---工作区和暂存区

    接着上篇 git的使用(一) http://www.cnblogs.com/horizonli/p/5323363.html 6.工作区和暂存区(中转站) 工作区(Working Directory) ...

  3. Laravel 5.1 中如何使用模型观察者

    有时候我们需要在一个表更改后,触发某个事件,最常见的比如,首页推荐商品 1 更改了,需要清空所有首页商品缓存. 首先我们需要在建立一个观察者类,比如 App\Model\Observers\Proje ...

  4. Linux的账号口令机制及其爆破

    账号保存 谈到linux的账号认证,其实就是如何保存于通过口令(password)鉴别,这里首先要将两个文件,一个是/etc/passwd,另外一个是/etc/shadow. /etc/passwd文 ...

  5. gem install 和 bundle 区别

    bundle install 在设置了所有包含在Gemfile中的东西.你也可以传递参数. 如果在production模式下,你很清晰的区分了每个app需要的gems. gem install 则安装 ...

  6. Egret动态设置按钮的图片

    参考: 动态设置Button按钮的状态图片 按钮有3个状态,up down disabled.这里区别于source,source.down,source.disabled,而是每个状态单独一个ima ...

  7. iOS开发 纯代码创建UICollectionView

    转:http://jingyan.baidu.com/article/eb9f7b6d8a81a5869364e8a6.html iOS开发 纯代码创建UICollectionView 习惯了使用xi ...

  8. iOS - 视频开发

    视频实质: 纯粹的视频(不包括音频)实质上就是一组帧图片,经过视频编码成为视频(video)文件再把音频(audio)文件有些还有字幕文件组装在一起成为我们看到的视频(movie)文件.1秒内出现的图 ...

  9. [转]理解Linux的处理器负载均值

    [转自]http://www.mike.org.cn/articles/understanding-of-linux-processor-load-average/ 你可能对于Linux的负载均值(l ...

  10. Java clone克隆方法 --深拷贝--浅拷贝 --原型模型

    什么是深拷贝? 什么是浅拷贝? 创建一个对象的方法有几种? 默认的Object方法中的clone是深拷贝还是浅拷贝? 为什么说很多深拷贝都是不彻底的深拷贝? 什么是原型模型,什么是原型模式? 原型模型 ...