canvas绘制正文形并填充-2

效果图

html结构

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>canvas10</title>

<link rel="stylesheet" href="">

</head>

<body>

<canvas id="canvas" style ="border:1px solid #aaa;diplay:block;margin:50px auto;">

当前浏览器不支持canvas,请更换浏览器后再试

</canvas>

</body>

</html>

js脚本

<script>

window.onload = function(){

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

canvas.width = 800;

canvas.height = 800;

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

drawRect(context,100,100,400,400,10,"#058","red");

}

function drawRect(context,x,y,width,height,borderWidth,borderColor,fillColor){

context.beginPath();

context.rect(x,y,width,height);

context.closePath();

context.lineWidth = borderWidth;

context.fillStyle = fillColor;

context.strokeStyle = borderColor;

context.fill();

context.stroke();

}

</script>

时间： 2024-10-03 18:09:57

canvas绘制正文形并填充-2的相关文章

canvas绘制形状

栅格 之前简单模板中有个宽/高150px的canvas元素.如下图所示,canvas元素默认被网格所覆盖.通常来说网格中的一个单元相当于canvas元素中的一像素.栅格的起点为左上角(坐标为(0,0)).所有元素的位置都相对于原点定位.所以图中蓝色方形左上角的坐标为距离左边(Y轴)x像素,距离上边(X轴)y像素(坐标为(x,y)). 绘制矩形 不同于SVG,HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径. canvas提供了三种方法绘制矩形

如何用 Canvas绘制图形

绘制矩形 不同于SVG,HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径.不过,我们拥有众多路径生成的方法让复杂图形的绘制成为了可能. 首先,我们回到矩形的绘制中.canvas提供了三种方法绘制矩形: fillRect(x, y, width, height) 绘制一个填充的矩形 strokeRect(x, y, width, height) 绘制一个矩形的边框 clearRect(x, y, width, height) 清除指定矩形区域,

Android Canvas绘制

public class DrawView extends View { public DrawView(Context context) {  super(context); } @Override protected void onDraw(Canvas canvas) {  super.onDraw(canvas);  /*   * 方法 说明 drawRect 绘制矩形 drawCircle 绘制圆形 drawOval 绘制椭圆 drawPath 绘制任意多边形   * drawLine

使用Canvas绘制图形的基本教程

原文地址:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把. 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用. 1.使用Canvas绘制直线: <!doctype html> <html> <head> <meta ch

Canvas绘制线条模糊的解决方案

前段时间,做一个跨平台app项目,需要绘制分时图和K线图.找了很多开源的js的图表库,包括echarts.highcharts等等,都不是很满意,原因有2: 1.太臃肿,我实际上只要一个分时和一个K线图表,最多搭配几个线形图 2.不满足需求.主要就是分时图,国内玩的js图表库,几乎都没有分时图.都是用1分钟线的收盘价线来做的,和中国股民的使用习惯完全不搭界. 多年前有人开源了一个js绘制股票图形的库,叫做html54stock,图像表现上很符合中国人的使用习惯,但是也有问题: 1.封装不好,很多

Canvas路径、描边、填充

<script> var context = document.getElementById('canvas').getContext('2d'); context.font = '48pt Helvetica'; context.strokeStyle = 'blue';//边框颜色 context.fillStyle = 'red';//填充颜色 context.lineWidth = '2'; //画文字 context.strokeText('边框', 60, 110); contex

用canvas绘制的饼状图，6等分，颜色随机

都说程序员懒,生活还是不能懒的,比如洗头.洗脸,当然也包括是分享咯.下面分享一下我用H5的新标签canvas绘制的饼状图,颜色是随机生成的,动态生成6等分,我还做了随机生成数据的, 配上文字,每份所占的比例就显而意见.,这点用在分析数据还是挺好的.图片如下; canvas 是 HTML5 提供的一个用于展示绘图效果的标签. canvas 原意画布, 帆布. 在 HTML 页面中用于展示绘图效果. 最早 canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现.. 基本使用语法: 使用

Android自定义控件 -Canvas绘制折线图(实现动态报表效果)

有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas绘制折线图.先看看绘制的效果: 代码: public class MyView extends View { //坐标轴原点的位置 private int xPoint=60; private int yPoint=260; //刻度长度 private int xScale=8;  //8个单位构

canvas绘制直线多边形（二）

在绘制之前,依据上一节所说的内容获取context  2维画布 1 context.moveTo(x,y); 定义绘图开始 2 context.lintTo(x1,y1); 定义线条画到的位置 3 context.lineWidth=5; //线条宽度 4 context.strokeStyle="red" //线条颜色 5 context.stroke(); //用于绘制线条 利用上述代码我们可以绘制一条,从(x,y)坐标开始,到(x1,y1)结束的宽5个像素,颜色为红色的直线