canvas认识

1使用canvas绘制一个矩形

<canvas id="canvas" width="640" height="360"></canvas>

<script>

//    获取context对象

    var canvas = document.getElementById('canvas');

    if(canvas.getContext) {

        var context = canvas.getContext('2d');

//        设置颜色

        context.fillStyle = 'rgb(255,0,0)';

//        从坐标（20,30）开始，画一个64x36大小的矩形

        context.fillRect(20,30,64,36);

    }

</script>

2划线

<script>

//    获取htmlcanvas标签

    var c=document.getElementById('myCanvas');

//    返回一个用来绘制环境类型的环境

    var ctx = c.getContext('2d');

//线宽

    ctx.lineWidth = 10;

//设置画笔颜色为红色

    ctx.strokeStyle = 'red';

//创建一个新的路径

    ctx.beginPath();

//画笔光标位置移动到10,10

    ctx.moveTo(10,10);

//从开始坐标移动到150,10处

    ctx.lineTo(150,50);

//开始绘制好定义的路线

    ctx.stroke();

</script>

<canvas id="myCanvas" width="200" height="100">

    你的浏览器不支持HTML5

</canvas>

3、画矩形

<script>

    //    获取htmlcanvas标签

    var c=document.getElementById('myCanvas');

    //    返回一个用来绘制环境类型的环境

    var ctx = c.getContext('2d');

    //线宽

    ctx.lineWidth = 10;

    //设置画笔颜色为红色

    ctx.strokeStyle = 'red';

    //创建一个新的路径

    ctx.beginPath();

    //绘制矩形的起点坐标、终点坐标、长、宽

    ctx.strokeRect(10,10,70,40);

    ctx.stroke();

</script>

4实心矩形

<script>

    //    获取htmlcanvas标签

    var c=document.getElementById('myCanvas');

    //    返回一个用来绘制环境类型的环境

    var ctx = c.getContext('2d');

    //线宽

    ctx.lineWidth = 10;

    //设置画笔颜色为红色

    ctx.strokeStyle = 'red';

    //创建一个新的路径

    ctx.beginPath();

    //绘制矩形的起点坐标、终点坐标、长、宽

    ctx.fillRect(10,10,70,40);

    ctx.stroke();

</script>

5画圆

<script>

    //    获取htmlcanvas标签

    var c=document.getElementById('myCanvas');

    //    返回一个用来绘制环境类型的环境

    var ctx = c.getContext('2d');

    //线宽

    ctx.lineWidth = 10;

    //设置画笔颜色为红色

    ctx.strokeStyle = 'red';

    //创建一个新的路径

    ctx.beginPath();

    //绘制矩形的起点坐标、终点坐标、长、宽

    ctx.arc(20,20,10,0,360*Math.PI/180,true);

    ctx.stroke();

</script>

6矩形的半圆

<script>

    //    获取htmlcanvas标签

    var c=document.getElementById('myCanvas');

    //    返回一个用来绘制环境类型的环境

    var ctx = c.getContext('2d');

    //线宽

    ctx.lineWidth = 1;

    //设置画笔颜色为红色

    ctx.strokeStyle = 'red';

    //创建一个新的路径

    ctx.beginPath();

    //绘制矩形的起点坐标、终点坐标、长、宽

    ctx.moveTo(20,20);

    ctx.lineTo(70,20);

    ctx.arcTo(120,20,120,70,50);

    ctx.lineTo(120,120);

    ctx.stroke();

</script>

7圆形矩形

<script>

    //    获取htmlcanvas标签

    var c=document.getElementById('myCanvas');

    //    返回一个用来绘制环境类型的环境

    var ctx = c.getContext('2d');

    //线宽

    ctx.lineWidth = 1;

    //设置画笔颜色为红色

    ctx.strokeStyle = 'red';

    //创建一个新的路径

    ctx.beginPath();

    //绘制矩形的起点坐标、终点坐标、长、宽

    ctx.moveTo(40,20);

    ctx.lineTo(100,20);

    ctx.arcTo(120,20,120,40,20);

    ctx.lineTo(120,70);

    ctx.arcTo(120,90,100,90,20);

    ctx.lineTo(40,90);

    ctx.arcTo(20,90,20,70,20);

    ctx.lineTo(20,40);

    ctx.arcTo(20,20,40,20,20);

    ctx.stroke();

</script>

8、擦除canvas画板

<script>

    //    获取htmlcanvas标签

    var c=document.getElementById('myCanvas');

    //    返回一个用来绘制环境类型的环境

    var ctx = c.getContext('2d');

    //线宽

    ctx.lineWidth = 1;

    //设置画笔颜色为红色

    ctx.strokeStyle = 'red';

    //创建一个新的路径

    ctx.beginPath();

    //绘制矩形的起点坐标、终点坐标、长、宽

    ctx.fillRect(20,20,40,80);

    ctx.clearRect(30,30,20,30);

    ctx.stroke();

</script>

9.绘制复杂图形

<script>

    //    获取htmlcanvas标签

    var c=document.getElementById('myCanvas');

    //    返回一个用来绘制环境类型的环境

    var ctx = c.getContext('2d');

    //线宽

    ctx.lineWidth = 1;

    //设置画笔颜色为红色

    ctx.strokeStyle = 'red';

    //创建一个新的路径

    ctx.beginPath();

    //绘制矩形的起点坐标、终点坐标、长、宽

    ctx.moveTo(60,50);

    ctx.quadraticCurveTo(40,20,120,20);

    ctx.stroke();

</script>

10.clip()

<script>

    //    获取htmlcanvas标签

    var c=document.getElementById('myCanvas');

    //    返回一个用来绘制环境类型的环境

    var ctx = c.getContext('2d');

    //线宽

    ctx.lineWidth = 1;

    //设置画笔颜色为红色

    ctx.strokeStyle = 'red';

    //创建一个新的路径

    ctx.beginPath();

    //绘制矩形的起点坐标、终点坐标、长、宽

    ctx.arc(60,50,20,0,2*Math.PI,true);

    ctx.clip();

    ctx.beginPath();

    ctx.fillStyle = 'lightblue';

    ctx.fillRect(60,50,10,10);

    ctx.stroke();

</script>

11文字

<script>

    //    获取htmlcanvas标签

    var c=document.getElementById('myCanvas');

    //    返回一个用来绘制环境类型的环境

    var ctx = c.getContext('2d');

    //线宽

    ctx.lineWidth = 1;

    //设置画笔颜色为红色

    ctx.strokeStyle = 'red';

    //创建一个新的路径

    ctx.beginPath();

    //绘制矩形的起点坐标、终点坐标、长、宽

    ctx.moveTo(40,20);

//    ctx.fillText('林耀辉',130,130);

    ctx.textBaseline = 'ideographic';

    ctx.font = 'bold italic 30px Arial';

    ctx.moveTo(0,110);

    ctx.lineTo(250,110);

    ctx.strokeText('林耀辉',130,130);

    ctx.stroke();

</script>

12、图片

13、放大缩小

<script>

    window.onload = function () {

        //    获取htmlcanvas标签

        var c=document.getElementById('myCanvas');

        //    返回一个用来绘制环境类型的环境

        var ctx = c.getContext('2d');

        //

        ctx.beginPath();

        ctx.strokeStyle = '#000000';

        ctx.strokeRect(20,20,100,100);

//        放大三倍

//        ctx.scale(3,3);

//        ctx.beginPath();

//        ctx.strokeStyle = '#cccccc';

//        ctx.strokeRect(20,20,100,100);

//        缩小0.5倍

//        ctx.scale(0.5,0.5);

//        ctx.beginPath();

//        ctx.strokeStyle = '#000000';

//        ctx.strokeRect(20,20,100,100);

        ctx.scale(-1,-1);

        ctx.beginPath();

        ctx.strokeStyle = '#000000';

        ctx.strokeRect(20,20,100,100);

    };

</script>

canvas认识的更多相关文章

html5 canvas常用api总结(三)--图像变换API
canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...
【探索】利用 canvas 实现数据压缩
前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...
简单入门canvas - 通过刮奖效果来学习
一 .前言一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
获取Canvas当前坐标系矩阵
前言在我的另一篇博文 Canvas坐标系转换中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码首先请看下面的一 ...
Canvas坐标系转换
默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...
Canvas绘图之平移translate、旋转rotate、缩放scale
画布操作介绍画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数方法描 ...
用html5的canvas和JavaScript创建一个绘图程序
本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...
html5标签canvas函数drawImage使用方法
html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...
使用 JavaScript 和 canvas 做精确的像素碰撞检测
原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...
H5项目开发分享——用Canvas合成文字
以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

随机推荐

html5增强元素--续
progress元素使用例子 <script> ; function progress_demo() { ) { i++; updateProgress(i); setTimeout(pr ...
DOM和jQuery
一.DOM 在学习DOM之前你应该已经具备了以下三个知识点的应用:HTML CSS javascript DOM 是 W3C(万维网联盟)的标准. W3C DOM 标准被分为 3 个不同的部分: 核心 ...
WPF安装部署小结
开机启动右击"MySetup">>"视图">>"注册表",在"HKEY_LOCAL-MACHINE&qu ...
php设置和获取变量类型
1. 获取变量类型 gettype($a); 2. 设置变量类型 settype($a,'int'); 3. 测试函数 is_array();是否数组 is_string();是否字符串 is_obj ...
Uubntu scrot 的简单使用
scrot 是一个使用 imlib2 库截取屏幕和保存图像的的工具. 1:安装 #apt-get install scrot 2:查看帮助 #scrot -help -v, --version显示版本 ...
T-SQL 创建、修改、删除数据库，表语法
CREATE 语句 CREATE语句的开头都是一样的,然后是特定的细节. CREATE <object type> <object name> 一.CREATE DATABAS ...
C语言的本质（38）——makefile之变量
我们详细看看Makefile中关于变量的语法规则.先看一个简单的例子: foo = $(bar) bar = Huh? all: @echo$(foo) 我们执行make将会打出Huh?.当make读 ...
LeeCode(Database)-Employees Earning More Than Their Managers
The Employee table holds all employees including their managers. Every employee has an Id, and there ...
sroHOBOorz来自HOBO的高精类
/* bigint() bigint(long long) bigint(bigint) bigint(char*) bigint(string) +, +=, ++ -, -=, -- *, *= ...
1、elasticsearch简介
1.elasticsearch简介中文帮助文档地址:http://es.xiaoleilu.com/ • Elasticsearch是一个基于Lucene的实时的分布式搜索和分析引擎.设计用于云计算 ...

canvas认识

canvas认识的更多相关文章

随机推荐

热门专题