1.canvas 标签

<canvas>

        <span>不支持canvas标签</span>

</canvas>

2.绘制环境: getContext('2d') //目前支持2d的场景

3.绘画方块:(1) fillRect(L,T,W,H) //默认颜色是黑色

　　　　　(2) strokeRect(L,T,W,H) //带边框的方块(默认一像素黑色边框,但是由于边框开始位置为一个像素点的1/2+相邻像素点的1/2,所以会显示2像素,解决办法:top值和left值增加0.5个像素)

　　　　　注:(1)和(2)顺序不同那么绘制的方块也不同

　　　　　(3) 当使用 fillRect(L,T,W,H) 设置canvas的宽度和高度时,只有内嵌css有效,外部css会出现拉伸的情况,例如:

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<script>

		window.onload=function(){

		　　　　var canvas=document.getElementById('canvas').getContext('2d');

		　　　　canvas.fillRect(50,50,50,50);

		}

	</script>

	<style>

		body{

		　　　　background: #000;

		}

		#canvas{

		　　　　width: 300px;

		　　　　height: 400px;

		　　　　background:#fff;

		}

	</style>

</head>

<body>

	<canvas id="canvas">

		<span>不支持canvas标签</span>

	</canvas>

</body>

</html>

显示情况如下:

该效果与我们预想的不同,这是因为标签中的宽高是画布中的真正宽度和高度,样式中的宽高等比例缩放,此时有两种修改方案:

①在代码js中添加设置宽高属性的代码设置宽度和高度:

canvas.setAttribute("height",canvas.clientHeight);

canvas.setAttribute("width",canvas.clientWidth);

②除去外部css中设置宽高属性的代码,给canvas标签直接添加宽度和高度属性:

<canvas id="canvas" width="300" height="400" style="background:#fff;">

	<span>不支持canvas标签</span>

</canvas>

或

<script>

    canvas.width = 300;

    canvas.height = 500;

</scritp>

最后显示效果如下:

4.设置绘图,边界绘制:

　window.onload=function(){

　　　　　　var canvas=document.getElementById('canvas').getContext('2d');

　　　　　　canvas.fillStyle='red';　　//填充颜色(绘制canvas是有顺序的)

　　　　　　canvas.lineWidth=10;　　//线高度(数值)

　　　　　　canvas.strokeStyle='blue';//边线颜色

　　　　　　canvas.lineJoin='round';   //边界连接点样式,属性值:miter(默认),round(圆角),bevel(斜角)

　　　　　　//  lineCap //端点样式,一条线的两个端点,属性值:butt(默认),round(圆角),square(高度多出为宽一半的值)

　　　　　　canvas.fillRect(50,50,100,100);

　　　　　　canvas.strokeRect(50.5,50.5,100,100);

　　}

6.绘图路径:

window.onload=function(){

    　　　　var canvas=document.getElementById('canvas').getContext('2d');
　　　　　　 canvas.fillStyle='red';

           canvas.beginPath();　　　　//开始绘制路径

           canvas.moveTo(100,200);　　//移动到绘制路径的新目标点

           canvas.lineTo(100,300);　　//新的目标点

           canvas.lineTo(200,300);　　//新的目标点

           canvas.closePath();　　　　//结束绘制路径,闭合(起点和终点连接)
　　　　　　 canvas.stroke();　　　　　　//画线
　　　　　　　
　　　　　　 canvas.beginPath();
　　　　　　 canvas.rect(10,10,100,100);//矩形区域
　　　　　　 canvas.closePath();
　　　　　　 ccanvas.fill();
　　　　　　 canvas.clearRect(10,10,100,100);//清除画布中的矩形区域

　　　　　　 canvas.save();//保存路径
　　　　　　//相当于函数,写在这中间的代码相当于局部变量,不会影响外部属性值
　　　　　　 canvas.restore();//恢复路径
}

7.[ 案例 ]  鼠标画线

window.onload=function(){

    　　　  var canvas=document.getElementById('canvas')

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

           canvas.onmousedown=function(ev){

           　　　　var ev= ev || window.event;

                  ctx.moveTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);

                  document.onmousemove=function(ev){

                    　　var ev= ev || window.event;

                    　　ctx.lineTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);

                    　　ctx.stroke();

                　}

                  document.onmouseup=function(){

                    　　document.onmousemove=null;

                    　　document.onmouseup=null;

                　 }

            }

}

关于canvas画布使用fillRect()时高度出现双倍效果解决办法的更多相关文章

  1. ScrollView嵌套ListView只显示一行之计算的高度不正确的解决办法(转)

    ScrollView嵌套ListView只显示一行之计算的高度不正确的解决办法 分类: android应用开发2013-12-19 09:40 1045人阅读 评论(3) 收藏 举报 AndroidS ...

  2. 爬虫爬数据时，post数据乱码解决办法

    最近在写一个爬虫,目标网站是:http://zx.bjmemc.com.cn/,可能是为了防止被爬取数据,它给自身数据加了密.用谷歌自带的抓包工具也不能捕获到数据.于是下了Fiddler.     F ...

  3. Bootstrap中关闭第二个模态框时出现的问题和解决办法

    Bootstrap中关闭第二个模态框时出现的问题和解决办法 1.关闭第二个模态框时,第一个模态框跟着消失. 解决办法: 第二个模态框的代码不要写在第一个模态框里面,确保两个模态框相对独立; 2.关闭第 ...

  4. oracle执行update语句时卡住问题分析及解决办法

    转载:http://www.jb51.net/article/125754.htm 这篇文章主要介绍了oracle执行update语句时卡住问题分析及解决办法,涉及记录锁等相关知识,具有一定参考价值, ...

  5. 返回xml过长时被nginx截断的解决办法

    返回xml过长时被nginx截断的解决办法 问题描述:通过网页获取数据,数据格式为xml.当xml比较短时,可以正常获取数据.但是xml长度过长时不能正常获取数据,通过观察返回数据的源代码,发现xml ...

  6. IDEA使用maven构建时控制台中文乱码的解决办法

    使用maven clean install 项目时控制台中文乱码,解决办法如下: Setting->maven->runner VMoptions: -Dfile.encoding=UTF ...

  7. mongodb 更新数据时int32变为double的解决办法 & 教程

    https://www.runoob.com/mongodb/mongodb-mongodump-mongorestore.html mongodb 更新数据时int32变为double的解决办法   ...

  8. java下载文件时文件名出现乱码的解决办法

    转: java下载文件时文件名出现乱码的解决办法 2018年01月12日 15:43:32 橙子橙 阅读数:6249   java下载文件时文件名出现乱码的解决办法: String userAgent ...

  9. 当display=none时，元素和子元素高度为0的解决办法

    在前端中为了某种需要,我们需要获取display=none的元素或者子元素的实际高度来进行某些处理,然而html对display=none的元素和子元素是不进行渲染的,如果我们没有规定这些元素的高度那 ...

随机推荐

  1. Linux回炉复习系列文章大纲

    本人最近在回炉Linux的内容,也做了很多整理,顺便也想将整理的内容分享出来. 由于该系列文章的内容主要是复习整理而来,其中绝大多数命令都是翻译和整理man或info文档总结的,另外很多地方也没有给出 ...

  2. dubbo的简单应用

    一. dubbo简介 dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,是阿里巴巴SOA服务化治理方案的核心框架. 二. 架构 引用dubbo的架构图: Provide ...

  3. R自带数据包

    datasets(R自带数据包) 作者:王彦博 作品来源:百度百科 precip #长度为70的命名向量 euro #欧元汇率,长度为11,每个元素都有命名 landmasses #48个陆地的面积, ...

  4. ecshop循环计数

    循环依次递增+1 <!-- {foreach from=$comments item=comment name=comment} --> {$smarty.foreach.comment. ...

  5. python可视化--matplotlib

    matplotlib在python中一般会与numpy同时出现,解决一些科学计算和数据的可视化问题. matplotlib其实就是matlib在python中的实现,因此不会有太大的难度,而由于pyt ...

  6. Java Web开发环境配置（JDK+Tomcat++IDEA 14）

    对于未接触过java web开发的大家而言,应该和我一样对java web编程开发比较迷茫,通过查一些资料,大致清楚了java web开发环境的一些基本配置,未做过相关编程的人员可以看一看,由于我刚接 ...

  7. CoolBlog开发笔记第2课:搭建开发环境

    教程目录 1.1 CoolBlog开发笔记第1课:项目分析 前言 今天是CoolBlog开发笔记的第2课,我们将要讲解的是开发环境的搭建.俗话说"工欲善其事必先利其器",Djang ...

  8. 用Html5/CSS3做Winform，一步一步教你搭建CefSharp开发环境（附JavaScript异步调用C#例子，及全部源代码）上

    本文为鸡毛巾原创,原文地址:http://www.cnblogs.com/jimaojin/p/7077131.html,转载请注明 CefSharp说白了就是Chromium浏览器的嵌入式核心,我们 ...

  9. 玩转spring boot——websocket

    前言 QQ这类即时通讯工具多数是以桌面应用的方式存在.在没有websocket出现之前,如果开发一个网页版的即时通讯应用,则需要定时刷新页面或定时调用ajax请求,这无疑会加大服务器的负载和增加了客户 ...

  10. celery的使用

    1.celery的任务调度 # -*- coding: utf-8 -*- import threading from bs4 import BeautifulSoup from tornado im ...