绘制矩形的方法,strokeRect()、fillRect()及clearRect()。

方法 描述
strokeRect(double x,double y,double w,double h) 使用如下属性,为指定的矩形描边:
● strokeStyle
● lineWidth
● lineJoin
● miterLimit
如果宽度(w 参数)或高度(h 参数)有一个为0的话,那么该方法将会分别绘制一条竖线或横线。如果两者都为0,那不会绘制任何东西
fillRect(double x,double y,double w,double h) 使用fillStyle属性填充指定的矩形。如果宽度或高度是0的话,它不会进行任何绘制
clearRect(double x,double y,double w,double h) 将指定矩形与当前剪辑区域相交范围内的所有像素清除。

效果图如下,左侧为未填充的矩形,右侧为填充的矩形。

代码如下所示,

var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"); context.lineJoin = "round";//设置线交叉处为圆弧状
context.lineWidth = 50; // context.font = '24px Consolas';
context.fillText("点击画布任何地方将擦去图形 !",175,200); //颜色
context.strokeStyle = "goldenrod";
context.fillStyle = "rgba(0,0,255,0.5)"; //绘制
context.strokeRect(75,100,200,200);
context.fillRect(325,100,200,200); context.canvas.onmousedown = function(e){
context.clearRect(0,0,canvas.width,canvas.height);
};

JavaScript代码

绘制圆形的方法,arc(),beginPath(),closePath(),fill(),rect(),stroke()。

方 法 描 述
arc() 可以绘制圆弧
beginPath() 将当前路径之中所有子路径都清除掉,以此来重置当前路径。
closePath() 显式地封闭某段开放路径。该方法用于封闭圆弧路径以及由曲线或者线段所创建的开放路径
fill() 使用fillStyle对当前路径进行填充
rect(double x,double y,double width,double height) 在坐标(x,y)处建立一个宽度为width,高度为height的矩形子路径。该子路径一定是封闭的,而且总是按逆时针方向创建的
stroke() 使用strokeStyle来描绘当前路径的轮廓线

效果图如下,

代码如下所示,

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

//一个函数,由于绘制网格
function drawGrid(context,color,stepx,stepy){
context.strokeStyle = color;
context.lineWidth = 0.5; for(var i = stepx + 0.5; i < context.canvas.width;i += stepx){
context.beginPath();
context.moveTo(i,0);
context.lineTo(i,context.canvas.height);
context.stroke();
} for(var i = stepy + 0.5;i < context.canvas.height;i +=stepy){
context.beginPath();
context.moveTo(0,i);
context.lineTo(context.canvas.width,i);
context.stroke();
}
}
//绘制网格 作为底图
drawGrid(context,"lightgray",10,10);
//绘图属性
context.font = "48pt Helvetica";
context.strokeStyle = "blue";
context.fillStyle = "orange";
context.lineWidth = "2"; //文字
context.strokeText("Stroke",60,110);
context.fillText("Fill",400,110); context.strokeText("Stroke & Fill",650,110);
context.fillText("Stroke & Fill",650,110); //绘制矩形
context.lineWidth = "5";
context.beginPath();
context.rect(80,150,150,100);
context.stroke(); context.beginPath();
context.rect(400,150,150,100);
context.fill(); context.beginPath();
context.rect(750,150,150,100);
context.fill(); //绘制开口弧线 context.beginPath();
context.arc(150,370,60,0,Math.PI*3/2,false);//角度为270度
context.stroke(); context.beginPath();
context.arc(475,370,60,0,Math.PI*3/2,false);
context.fill(); context.beginPath();
context.arc(820,370,60,0,Math.PI*3/2,false);
context.stroke();
context.fill(); // 封闭的弧线 context.beginPath();
context.arc(150,550,60,0,Math.PI*3/2,false);
context.closePath();
context.stroke(); context.beginPath();
context.arc(475,550,60,0,Math.PI*3/2,false);
context.closePath();
context.fill(); context.beginPath();
context.arc(820,550,60,0,Math.PI*3/2,false);
context.closePath();
context.stroke();
context.fill();

JavaScript代码

canvas初探3:画方画圆的更多相关文章

  1. 操作系统实验 windows编程多线程 生产者消费者问题 画圆画方(内置bug版)

    实验3:随便写的 #include <windows.h> #include <string> #include <stdio.h> #pragma warning ...

  2. ABB工业机器人(条件执行数字信号判断,画方or画圆)

    一.前戏 条件:从安全点,到工具区域夹取工具(笔),到工作区域,判断数字信号 Di1 =1 ,Ture :画方,False:画圆,回到工具区域放下工具(笔),回到安全点 二. 准备工作 校准tcp工具 ...

  3. Canvas 如何画一个四分之一圆

    转: Canvas 如何画一个四分之一圆 HTML: Document JS: var c = document.getElementById('ctx') var ctx = c.getContex ...

  4. 【液晶模块系列基础视频】4.1.X-GUI图形界面库-画线画圆等函数简介

    [液晶模块系列基础视频]4.1.X-GUI图形界面库-画线画圆等函数简介 ============================== 技术论坛:http://www.eeschool.org 博客地 ...

  5. LCD编程_画点线圆

    上篇博客中进行了lcd的简单测试,这篇博客将进行更加复杂的测试——画点.画线.画圆.画线和画圆是在画点的基础上实现的,因此本篇博客重点实现画点操作. 先抛出这样的一个问题,已知: (x,y)的坐标: ...

  6. 利用LineRenderer画出一个圆,类似于lol中的攻击范围

    http://www.unity蛮牛.com/blog-5945-1409.html 本人大四狗,学unity半年有余,写此文章纯粹记录自己的心得. 废话不多说,进入主题.... 效果如图: 首先要理 ...

  7. 1.1.2-学习Opencv与MFC混合编程之---画图工具 画直线 画圆 画矩形

    源代码地址:http://download.csdn.net/detail/nuptboyzhb/3961685 画图工具 1.     画直线 Ø  增加‘直线’菜单项,建立类向导: Ø  对CXX ...

  8. Canvas的quadraticCurveTo 和 bezierCurveTo 画曲线 方法细说

    详细代码如下: <!doctype html> <html lang="en"> <head> <script src="htt ...

  9. CSS 画三角形、圆

    <div class="square"></div> <style> .square { height: 0px; width: 0px; bo ...

随机推荐

  1. SQL删除重复数据只保留一条

    用SQL语句,删除掉重复项只保留一条 在几千条记录里,存在着些相同的记录,如何能用SQL语句,删除掉重复的呢 1.查找表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断 select ...

  2. WPF 通过Border来画边框

    WPF有自己的表格控件DataGrid.ListBox等,如果只是简单的需求,可以通过Border控件来画边框. 比如我们需要给上面的控件加上边框. <Window x:Class=" ...

  3. django学习记录

    1.参考资料问题: 现在django发布了1.11版本,离线文档下载引擎地址 文档下载地址 在线文档:https://docs.djangoproject.com/en/1.10/intro/tuto ...

  4. Jmeter发送Java请求

    1.创建一个Java工程 2.把Jmeter的lib\ext目录下的ApacheJMeter_java.jar.ApacheJMeter_core.jar文件添加进该项目的Build Path 3.创 ...

  5. vs使用

    1.控制dll是否生成到本地,如图,右击dll,选择属性,设置复制到本地为true即可

  6. JavaScript通过ID获取元素坐标

    JavaScript通过ID获取元素坐标 function getElementPos(elementId) {    var ua = navigator.userAgent.toLowerCase ...

  7. docker搭建Hadoop集群

    一个分布式系统基础架构,由Apache基金会所开发. 用户可以在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力高速运算和存储. 首先搭建Docker环境,Docker版本大于1.3. ...

  8. java web系统中时间比sql server中的日期少2天的解决办法

    系统环境 jdk:1.7 数据库:sql server 2008 问题描述 升级1.7之后查询出来的日期就比数据库中的少2天,降回1.6版本的jdk就正常了. 问题原因及解决办法 国内网站有很多不靠谱 ...

  9. 通过配置web.config使WCF向外提供HTTPS的Restful Service

    如何通过WCF向外提供Restful的Service请看如下链接 http://www.cnblogs.com/mingmingruyuedlut/p/4223116.html 那么如何通过对web. ...

  10. spring spring data jpa save操作事务

    整合spring spring data jpa的时候,在save方法上加了@Transactional注解.此时调用springdatajpa save方法并不会真的把数据提交给数据库,而是缓存起来 ...